I have a Material Tab component in Angular 2.
I want to have a button at the end of the tabs, that acts as a add tab button. Upon clicking on it a new tab is created before it.
I tried putting a button there, but couldn't find how to place it exactly next to the last tab.
So what I did is I added a tab that acts like a button. When this tab is clicked, a new tab is created.
However, when this tab is clicked, it gains focus. While I can change which tab is selected, the tab still has the focused UI (it is colored).
How can I make it lose it's focus completely?
P.S. If there is a way to add a regular button next to the last tab, without making it a tab, this would also be good.
Edit - Code:
This is how my tabs are setup:
<mat-tab-group (selectedTabChange)="selectedTab($event)">
<mat-tab>
<ng-template mat-tab-label>
Basic Details
</ng-template>
</mat-tab>
<mat-tab #categoryTab *ngFor="let table of mCase.Tables; let tableIndex = index" [attr.data-index]="tableIndex">
<mat-tab>
<mat-tab #addCategory>
<ng-template mat-tab-label>
<div color="white" class="center">Add category</div>
</ng-template>
</mat-tab>
</mat-tab-group>
Code behind:
public selectedTab(e) {
if (e.index == 1 + this.mCase.Tables.length) {
//Add new category
this.CreateTable();
this.selectedIndex = this.mCase.Tables.length;
}
Promise.resolve().then(() => this.selectedIndex = e.index);
}
You could try add the button like this:
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
Basic Details
</ng-template>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<button mat-icon-button (click)="foo()">
<mat-icon>add_circle</mat-icon>
</button>
</ng-template>
</mat-tab>
</mat-tab-group>
Working example: https://stackblitz.com/edit/angular-zrklwg
By the way, if you are bothered by the button having disabled like styles, you can just override that with some custom CSS! :D
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With