How Edit tab-material label angular?-CodePudding

I have a group tag

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

I need to double click or right click and edit the label of the tab

I tried like this but is not what I want and when I change the text the tab is reloaded

<input [(ngModel)]="tabs[selectedIndex]">

<mat-tab-group (selectedIndexChange)="tabChanged($event)">
    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
        Contents for {{tab}} tab
    </mat-tab>
</mat-tab-group>

 public tabs: string[] = ['test1', 'test2'];

  public selectedIndex: number = 0;
  constructor() {
    this.tabs.forEach(element => this);
  }

  ngOnInit(): void {
  }

  public tabChanged($event: number) {
    this.selectedIndex = $event;
  }

CodePudding user response：

use <ng-template mat-tab-label> ... <ng-template> this allows you to modify the tab header area, and use a flag edit mode for every tab to enable or disable the editmode

<mat-tab-group (selectedIndexChange)="tabChanged($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index">
    <ng-template mat-tab-label>
      <ng-container *ngIf="!tab.editMode; else editTemplate">
        <div (dblclick)="tab.editMode = true">{{tab.name}}</div>
      </ng-container>

      <ng-template #editTemplate>
        <input [(ngModel)]="tab.name" />
        <mat-icon  (click)="tab.editMode = false"
          >save</mat-icon
        >
      </ng-template>
    </ng-template>
    Contents for {{tab.name}} tab
  </mat-tab>
</mat-tab-group>

public tabs: any[] = [{editMode: false, name:'test1'}, {editMode: false, name:'test2'}];