Clicked but nothing happened - what's wrong with the function?

Question

Clicked but nothing happened - what's wrong with the function?

For my project, I have incorporated tabs from Angular Material. You can find more information about these tabs here.

Below is the code snippet I am using:

<mat-tab-group animationDuration="0ms" >
    <mat-tab></mat-tab>
    <mat-tab (click)="setData(upgrade.name)" [label]="upgrade.name" *ngFor="let upgrade of upgradeType; let i = index"> </mat-tab>
  </mat-tab-group>

The function in question is as follows:

setData(data){
    alert(data)
}

However, on clicking the tab, the setData function does not execute. Any insights on why this might be happening?

angular typescript angular-material

Answer 1

Answer №1

mat-tab does not support the click property, so you will need to utilize the mat-tab-group property (selectedTabChange) instead. This will be triggered whenever a tab is changed.

Give this a try:

mat-tab.component.html

<mat-tab-group (selectedTabChange)="setData($event)" animationDuration="0ms" >
    <mat-tab></mat-tab>
    <mat-tab [label]="upgrade.name" *ngFor="let upgrade of upgradeType; let i = index"> </mat-tab>
</mat-tab-group>

mat-tab.component.ts

setData(event: MatTabChangeEvent) {
    console.log("click", event.tab.textLabel); //console out will be click {{upgrade.name}}
}

Check out the live example on stackblitz:

https://stackblitz.com/edit/angular-wzc6m3-rpap1a?file=src/app/tab-group-align-example.html

I hope this information proves useful :)

Answer 2

mat-tab does not support the click property, so you will need to utilize the mat-tab-group property (selectedTabChange) instead. This will be triggered whenever a tab is changed.

Give this a try:

mat-tab.component.html

<mat-tab-group (selectedTabChange)="setData($event)" animationDuration="0ms" >
    <mat-tab></mat-tab>
    <mat-tab [label]="upgrade.name" *ngFor="let upgrade of upgradeType; let i = index"> </mat-tab>
</mat-tab-group>

mat-tab.component.ts

setData(event: MatTabChangeEvent) {
    console.log("click", event.tab.textLabel); //console out will be click {{upgrade.name}}
}

Check out the live example on stackblitz:

https://stackblitz.com/edit/angular-wzc6m3-rpap1a?file=src/app/tab-group-align-example.html

I hope this information proves useful :)

Answer 3

Answer №2

One possible solution is to utilize the selectedIndexChange event. You can refer to the code snippet and stackblitz link below for more details:
HTML:

<mat-tab-group 
               (selectedIndexChange)="test($event)">
 <mat-tab *ngFor="let tab of upgradeType; let index = index" [label]="tab.name">
   <button mat-raised-button
            class="example-delete-tab-button"
            (click)="removeTab(index)">
      Delete Tab
    </button>
  </mat-tab>
</mat-tab-group>

TS:

export class AppComponent {
  upgradeType=[];
  constructor(){
    let temp=new UpgradeType();
    temp.name="A";
    temp.id=1;
    this.upgradeType.push(temp);
    let temp2=new UpgradeType();
    temp2.name="B";
    temp2.id=2;
    this.upgradeType.push(temp2);
  }
  test(index){
    console.log(index);
    console.log(this.upgradeType[index]);
  }
}
export class UpgradeType{
  name:string;
  id:number;
}

NOTE: You can access the demo code in stackblitz => Demo code example

Answer 4

One possible solution is to utilize the selectedIndexChange event. You can refer to the code snippet and stackblitz link below for more details:
HTML:

<mat-tab-group 
               (selectedIndexChange)="test($event)">
 <mat-tab *ngFor="let tab of upgradeType; let index = index" [label]="tab.name">
   <button mat-raised-button
            class="example-delete-tab-button"
            (click)="removeTab(index)">
      Delete Tab
    </button>
  </mat-tab>
</mat-tab-group>

TS:

export class AppComponent {
  upgradeType=[];
  constructor(){
    let temp=new UpgradeType();
    temp.name="A";
    temp.id=1;
    this.upgradeType.push(temp);
    let temp2=new UpgradeType();
    temp2.name="B";
    temp2.id=2;
    this.upgradeType.push(temp2);
  }
  test(index){
    console.log(index);
    console.log(this.upgradeType[index]);
  }
}
export class UpgradeType{
  name:string;
  id:number;
}

NOTE: You can access the demo code in stackblitz => Demo code example

Clicked but nothing happened - what's wrong with the function?

Answer №1

Answer №2

Similar questions

What is the best way to combine an array of objects into a single object in typescript?

An Angular module downloaded from npm seems to be lacking the required @NgModule declaration

Leveraging @Input in Angular 2 to transmit information to ng2-typewriter

Discover the Location and Sign Up for Angular2+ Service

How to assign attributes to all child elements in Angular?

After pushing to history in React, the rendered component fails to display on the screen

Async await causing failure in change detection

What is the best way to incorporate a string value from an external file into a variable in TypeScript without compromising the integrity of special characters?

Webpack may suggest, "An extra loader might be needed" within a React.js project

Tips for enlarging a mat-expansion-panel by pressing a button in Angular?

The navigator.geolocation.watchPosition call did not return any available position information

A guide on setting up a countdown timer in Angular 4 for a daily recurring event with the help of Rxjs Observable and the Async Pipe

Screen a roster for shared elements with another roster

Using the reduce method in JavaScript or TypeScript to manipulate arrays

Enforcement of Typescript Field Type Lax During Assignment

I am having trouble figuring out the issue with the state and how to properly implement it in Typescript

Tips for updating the styles within a class for Angular 6 dynamically

Utilizing Vue 3/Nuxt 3 Scoped Slots to Automatically Deduce Generic Data Types from Props

Issue with page reload in Angular 8 when URL contains a dot

Leverage HighCharts on numerous occasions