Create (click) event on MatTab Material

问题

I dynamically loop thru tabs and i would like to add a (click) event on to be able to load different options when i select tab.

Isn't it possible to have an event (click) event on ? I tried with (selectChange) on but then i cannot get hold of bank.id from my loop when creating tabs.

Isn't it possible to add simple click event on dynamically created tabs??

    <mat-tab-group>
  <mat-tab label="All transactions">
    <mat-list>
      <mat-list-item *ngFor="let bank of banks">
        <h4 mat-line>{{bank.fullName}}</h4>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <mat-tab *ngFor="let bank of banks" (click)="fetchAccounts(bank.id)" label="{{bank.fullName}}">

    <mat-list>

      <mat-list-item *ngFor="let account of accounts">
        <h4 mat-line>{{bank2.fullName}}</h4>
      </mat-list-item>
    </mat-list>
  </mat-tab>
  <!-- <mat-tab label="Test Bank" disabled>
    No content
  </mat-tab> -->

</mat-tab-group>

回答1:

Isn't it possible to add simple click event on dynamically created tabs? - no i think, it isn't possible, but you can use (selectedTabChange) on <mat-tab-group> as:

<mat-tab-group (selectedTabChange)="yourFn($event)">

The event-Object holds an index, so you can do something like this:

yourFn($event){
    this.fetchAccounts(this.banks[$event.index].id)
}

Example: https://stackblitz.com/edit/angular-xurhan

回答2:

I don't have the same problem as you had. All I needed was a simple click event on a mat-tab. I change the route on a click event but the click event did not bind to the tab. I did some research and what you can do is create a custom label on which you can put the click event. For example...

<mat-tab>
    <ng-template mat-tab-label>
        <span (click)="onClick()">Custom label</span>
    </ng-template>
</mat-tab>

This will work if you create the tab dynamically. To expand on your example...

<mat-tab *ngFor="let i of [1, 2, 3]">
    <ng-template mat-tab-label>
        <span (click)="onClick()">Custom label {{i}}</span>
    </ng-template>
</mat-tab>

The only problem I had was with the css for the span. It doesn't have any padding so you actually have to click on the span itself to make the event work. If you click outside it but within the tab, the tab is going to change but the event won't fire.

To fix that, make the padding bigger on this span. For example,

.custom-label { padding: 15px 0 15px 0; }

This one, for example worked for me but there was still room on the left and right side that the click didn't wan't to fire. I din't solve that one.

回答3:

use [selectedIndex] to set dynamically loop thru

回答4:

The problem is not the mat-tab. The problem is that the value you are trying to pass to MatTabGroup is contained within MatList. For example, if you did:

<h4 mat-line (click)="getValue(bank)">{{bank.fullName}}</h4>
getValue(value: string) {
  console.log(value);
}

That would work. Since you need to get the value from within TabGroup, basically you would have to do what Mr. Void said.

来源：https://stackoverflow.com/questions/48507161/create-click-event-on-mattab-material

标签

angular

angular-material2