Angular unfocus tab and set focus to different tab - css

Question

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);
}

Answer 1

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

Answer 2

You can use .blur() on the event.currentTarget of the button which has been clicked. .blur() is the opposite of the .focus() method and will remove focus from an element.
In you question you said:
Upon clicking on it a new tab is created before it.
You didn't add any html, so I just went and created an example of how you can dynamically append buttons to the html via a data bound array.
this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
To learn about how this works, see this answer.
This is the crux of the component code that you can use to blur focus on the element.
addButton(clickedButtonIndex, event){
this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
event.currentTarget.blur();
}
Working Example: https://stackblitz.com/edit/angular-vslscm
In the example, I have set a red background in css to be applied to buttons when they are focused. You can see that when you click on a button, it momentarily will turn red before being toggled off again. Clicking the buttons will add a new button before the button which was clicked.