CODEWITHSUNDEEP
angularangular-material2
Tim
Tim

Reputation: 1695

Angular Material programmatically change Tab labels

I am using Angular 5.0.0 with Material 5.0.0-rc.1. I have a tab group where I want the last tab to always have an extra icon button as part of the label.

Here is the existing code for the tab group:

<mat-tab-group #revTabGroup class="tab-group" [(selectedIndex)]="selectedTab">
    <mat-tab *ngFor="let rev of proposal.revisions" label="{{rev.revisionID}}">
        <proposal-revision [proposalRevision]="rev"></proposal-revision>
    </mat-tab>
</mat-tab-group>

I want <button mat-icon-button matTooltip="Delete This Item"><mat-icon>delete_forever</mat-icon></button> to show up next to the revisionID on the last tab only. The number of tabs will change, so there needs to be a function or something to call to update which tab has the button after changes are made.

First, is it even possible to display a button on the tab label, or can you only add text?

Second, is there a way to programmatically set the label, maybe something like this.revTabGroup.???.textLabel = "<button> ... </button>"?

I even thought that maybe this could be done using css, something like:

.mat-tab-labels:last-child {
    ...
}

However, I couldn't get anything to work. Anyone have any ideas or know if this is possible?

Upvotes: 2

Views: 10138

Answers (1)

Everest
Everest

Reputation: 607

You can use Angular's last key in ngFor loops:

<mat-tab-group #revTabGroup class="tab-group" [(selectedIndex)]="selectedTab">
    <mat-tab *ngFor="let rev of proposal.revisions; let last = last;" [label]="rev.revisionID">
          <ng-template md-tab-label>
            {{rev.revisionID}}
            <button *ngIf="last" mat-icon-button matTooltip="Delete This Item"><mat-icon>delete_forever</mat-icon></button>
          </ng-template>
        <proposal-revision [proposalRevision]="rev"></proposal-revision>

    </mat-tab>
</mat-tab-group>

Upvotes: 3

Related Questions