Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular unfocus tab and set focus to different tab

Tags:

css

tabs

angular

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);
}
like image 293
amitairos Avatar asked Dec 31 '25 08:12

amitairos


1 Answers

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

like image 196
SrAxi Avatar answered Jan 02 '26 22:01

SrAxi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!