I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead.
For reference, you can access the code snippet with the implemented tab addition functionality by visiting this StackBlitz link. The goal is to have the Add Tab button integrated seamlessly within the vertical tab layout.
HTML:
<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-group>
<button mat-raised-button class="example-add-tab-button add-tab-btn" (click)="addTab()"> Add Tab </button>
TS:
import {Component} from '@angular/core';
import { FormControl} from '@angular/forms';
/**
* @title Basic use of the tab group
*/
@Component({
selector: 'tab-group-basic-example',
templateUrl: 'tab-group-basic-example.html',
styleUrls: ['tab-group-basic-example.css'],
})
export class TabGroupBasicExample {
tabs = ['First', 'Second'];
selected = new FormControl(0);
selectAfterAdding: boolean;
addTab() {
this.selectAfterAdding = true;
this.tabs.push('New');
if(this.selectAfterAdding) {
this.selected.setValue(this.tabs.length - 1);
}
}
}
Seeking guidance on integrating the Add Tab button seamlessly into vertical tabs design.