Avoid pressing on y mat-button-toogle

In my component, I have a button-toggle like this:

<mat-button-toggle-group appearance="legacy">
  <mat-button-toggle *ngFor="let session of sessionsArray!">
    <fa-icon icon="calendar-alt"></fa-icon>
    {{ session.dateSession!.format('dddd D MMMM YYYY') }}
    <fa-icon icon="check-circle" class="check" *ngIf="verifyExistingSession(session)"
             (click)="onClickSession(session)"></fa-icon>
  </mat-button-toggle>
</mat-button-toggle-group>

Everything seems to be in order (sessionsArray contains the necessary objects, icons and dates are displaying correctly, etc.), but when I click on the button nothing happens: the function "onClickSession" is not being triggered.

I've tried putting the function call directly inside the mat-button-toogle element, but it has the same result...

However, if I call the same function outside of the mat-button-toogle-group group, the function works as expected.

Do you have any idea why the click event is not being captured?

EDIT 1

After seeing Eliseo's response, here is the updated code:

TS :

  clickOnSession(event: MatButtonToggleChange): void {
    // eslint-disable-next-line no-console
    console.log(event.value);
  }

HTML :

...
angulartypescript

Answer №1

Take a look at the API documentation

In the documentation, you can find that there is an 

@Output()change: EventEmitter<MatButtonToggleChange>
associated with the MatButtonToggleGroup

What does this mean? It means that you can write something like

<mat-button-toggle-group (change)="yourFunction($event)">
  ...
</mat-button>

Pay attention to the (change) -the name of the Output property- and how to pass the argument using $event -$event is a reserved word used by Angular in .html files.

Your function will receive a variable of type MatButtonToggleChange -notice it's the same type as defined in the EventEmitter. If you check the class MatButtonToogleChange, you'll see it has a "value" property, so you can utilize it as:

  yourFunction(event: MatButtonToggleChange)
  {
    console.log(event.value)
  }

NOTE. If all you need to do is assign a value to a variable, you can use another approach, which is [(ngModel)] like below

<mat-button-toggle-group [(ngModel)]="myvariable">
  ...
</mat-button>

{{myvariable}}

Alternatively, you can use ReactiveForms as well.

Update: But (there's always a but).. you need to give a "value" to the toggle buttons

<mat-button-toggle-group (change)="yourFunction($event)">
    <mat-button-toggle *ngFor="let seance of tableauSeances!"
            <!--see the "value"-->
            [value]="seance">
       <fa-icon icon="calendar-alt"></fa-icon>
       {{ seance.dateSeance!.format('dddd D MMMM YYYY') }}
       <fa-icon *ngIf="verifierSeanceExistante(seance)" 
           icon="check-circle" class="check"></fa-icon>
   </mat-button-toggle>
</mat-button-toggle-group>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular log out function to automatically close pop-up windows

Within my application, there is a page where users can open a popup window. When the user clicks on logout, it should close the popup window. To achieve this, I have used a static variable to store the popup window reference in the Global.ts class. public ...

javascriptangulartypescriptiframe

Angular5 - Modify a public variable using an intercept in a static service

Take into account the following Angular service: @Injectable() export class AuthService { public userConnected: UserManageInfo; getManageInfo(): Observable<UserManageInfo> { return this.httpClient .get('api/Account/Man ...

angulartypescriptserviceangular5

Validation with zod is unsuccessful under certain conditions

I am facing an issue with my form that contains a radio button with three input fields inside it. The submit button is supposed to validate that only one of the input fields is correctly entered. Despite using refine() in zod validation, I cannot get it ...

reactjstypescriptzod

Using TypeScript to call Node.js functions instead of the standard way

Can someone assist me with the issue I'm facing? I have developed a default node.js app with express using Visual Studio nodejs tools, and now I am attempting to call the setTimeout function that is declared in node.d.ts. The code snippet in question ...

javascriptnode.jstypescriptsettimeoutntvs

Tips for overlaying text on an image in html with the ability to zoom in/out and adjust resolution

My challenge is aligning text over an image so that they move together when zooming in or out. However, I am facing difficulties as the text and image seem to move in different directions. I have attempted using media queries and adjusting the positions of ...

htmlcssangularbootstrap-4

What is the best way to determine Prisma types across various projects?

My current project has the following structure: dashboard -- prisma-project-1 -- prisma-project-2 -- client-of-prisma-project-1-and-prisma-project-2 This dashboard is designed to merge data from two separate databases and display them in a meaningful w ...

typescriptprisma

Modifying the appearance of a Component within a NavLink

I'm currently working on a navbar using NavLink from React-Router-Dom. It's fine to use the 'isActive' prop to style the active Link, but I'm stuck on how to style the subelements inside it. For more specific details, please take a ...

javascriptreactjstypescriptreact-router-domreact-props

Is app.component.ts necessary in an Angular 2 project?

Currently diving into Angular 2 and have a burning question on my mind. Do I really need the app.component.ts file in my project? Each of my folders has its own component and template, so I'm debating if the main component is necessary or if I can rem ...

angulartypescript

Utilizing TypeScript to perform typing operations on subsets of unions

A TypeScript library is being developed by me for algebraic data types (or other names they may go by), and I am facing challenges with the more complex typing aspects. The functionality of the algebraic data types is as follows: // Creating ADT instatiat ...

typescripttypescript-genericsalgebraic-data-typestypescript4.0

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

When it comes to utilizing BehaviorSubject.value and AsyncSubject in RXJS, it is essential to understand

As a newcomer to RXJS, I am seeking advice on whether my current approach is considered best practice. My situation involves an API that returns a list of countries which needs to be utilized across multiple components. The external API can sometimes be sl ...

angularrxjsreactive

TypeScript error: Cannot find property 'propertyName' in the 'Function' type

I encountered an issue with the TypeScript compiler when running the following code snippet. Interestingly, the generated JavaScript on https://www.typescriptlang.org/play/ produces the desired output without any errors. The specific error message I recei ...

javascripttypescript

Is it possible to insert data into SQL Server from an Angular application without relying on .NET Core?

Is there a way to extract data from an Angular-made form and store it in a SQL Server table without the need for .NET Core? ...

sql-serverangular.net-coreangular5

The rendering of the Angular 2 D3 tree is not functioning properly

Attempting to transition a tree created with d3 (v3) in vanilla JavaScript into an Angular2 component has been challenging for me. The issue lies in displaying it correctly within the component. Below is the code snippet from tree.component.ts: import { ...

javascriptangulartypescriptd3.jstree

Mastering typing properties in React with TypeScript

Could someone please help me with this issue? I have created a basic react component. interface iRowData{ name: string } export default function ResultsSection(data: iRowData[]) { return <div>Results</div> } When I try to use it in ano ...

reactjstypescript

Strategies for enhancing performance in an Angular 4 project

Currently, I am engaged in a project that involves utilizing Angular 4 for the front-end and PHP for the back-end with the support of an Apache server on Ubuntu 16.04 LTS. We have incorporated Node JS to facilitate the functionality of Angular. This raises ...

apacheangulartypescript

Angular input field with the ability to add and remove multiple options

Users can enter multiple emails to be added to a list, and they have the option to remove emails from the list. https://i.sstatic.net/vnHpJ.png ...

angular

Creating dynamic key objects in TypeScript with index signatures: A beginner's guide

How can the code be optimized to automatically initialize a new product type without adding extra lines of code? Failure to initialize the variable results in a syntax error. enum ProductType { PC = 'pc', LAPTOP = 'laptop', TV ...

typescripttypescript-typings

Angular 9: Chart.js: Monochromatic doughnut chart with various shades of a single color

My goal is to display a monochromatic doughnut chart, with each segment shaded in varying tones of the same color. I have all the necessary graph data and just need to implement the color shading. ...

javascriptangulartypescriptchart.jsangular9

The message shown on items.map stating that parameter 'item' is implicitly assigned the type 'any'

Currently, I am delving into the world of Ionic React with Typescript by developing a basic app for personal use. My current challenge involves dynamically populating an IonSegment from an array. Here is the relevant code snippet: const [items, setItems] ...

reactjstypescriptionic-frameworkreact-typescriptionic-react