Dynamically adding a new tab to mat-tab-group

Question

I'm using Angular v8 and Angular Materials. In particular mat-tab-group and mat-tab. I want to have something like the below. I want to be able to click on the "+" (which looks like a tab) and the result would be that it would create a new tab

After clicking on the "+" we'd see as below (focus is on the new tab we just added)

If I have a button above the mat-tab-group (which adds a new tab) all works fine but we want the "+" to be at the end of the tab list (as shown above). I can get the tab to create but focus doesn't got to it.

My code looks like. In the setSelectedIndex method call I add a new customer object and then set the selectedIndex to it. But no joy. Code sample below. Can try add as a plunkr if needs be

<mat-tab-group
        class="no-vertical-scroll"
        [disableRipple]="true"
        animationDuration="0ms"
        (selectedTabChange)="setSelectedIndex($event)"
        (focusChange)="onFocusChange($event)"
        [selectedIndex]="selectedTabIndex"
        style="margin-top: 10px;">

    <mat-tab *ngFor="let customer of customers; let index = index"
             class="fullHeight no-vertical-scroll no-horizontal-scroll">

        <div>
            content for each tab
        </div>

    </mat-tab>

    <mat-tab tooltip="New Tab" class="fullHeight no-vertical-scroll" label="New Tab">
        <ng-template mat-tab-label class="fullWidth">
            <span><mat-icon>add</mat-icon></span>
        </ng-template>
    </mat-tab>

</mat-tab-group>

Thanks Ro

Answer 1

您可以尝试使用数组创建选项卡并使用 ngFor 绑定它，然后您可以更改数组，该数组将反映选项卡中的更改，例如添加和删除。

检查以下示例：

<div>
      <button mat-raised-button
              class="example-add-tab-button"
              (click)="addTab(selectAfterAdding.checked)">
        Add new tab
      </button>
      <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
    </div>
    
    <mat-tab-group [selectedIndex]="selected.value"
                   (selectedIndexChange)="selected.setValue($event)">
      <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
        Contents for {{tab}} tab
      </mat-tab>

   <mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
   </mat-tab>

    </mat-tab-group>

.ts文件

  tabs = ['First', 'Second', 'Third'];
  selected = new FormControl(0);

  addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

堆栈闪电战示例

更新

您可以通过在包含实际选项卡的数组后面添加选项卡来添加位于选项卡最后的 + 按钮，如下所示：

<mat-tab disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab(selectAfterAdding.checked)">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
</mat-tab>