Angular unfocus tab and set focus to different tab

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

Post code code snippets, at least html and javascript. – Munim Munna Feb 18 '18 at 12:29 — Munim Munna, Feb 18 '18 at 12:29
@MunimMunna edited with code – amitairos Feb 21 '18 at 08:16 — amitairos, Feb 21 '18 at 08:16

SrAxi · Accepted Answer · 2018-02-21T15:21:18.630

3

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

edited Feb 21 '18 at 15:21

answered Feb 21 '18 at 14:42

SrAxi

19,787
11
46
65

I'm trying to change the disabled style with the following css: .mat-button[disabled] { color : rgba(0, 0, 0, 0.26); background-color: transparent; } But it doesn't work. Any ideas? – amitairos Feb 22 '18 at 11:33
1

@amitairos Hey! I'm glad it worked. Try by adding a class to the button, like `fake-disabled` or whatever you like, and then just change what you want with a classic CSS rule like: `button.fake-disabled: { color: #000; }`. – SrAxi Feb 22 '18 at 23:45
@amitairos Hey! Not really, but have a look at this and see if it helps, good luck mate! ;) https://stackoverflow.com/questions/43690291/how-to-overwrite-angular-2-material-styles – SrAxi Feb 26 '18 at 09:12
Didn't work, but I found that if I set ```[disabled]="false"``` to the button - it can be colored, while the tab is still disabled. So it works great. Thanks! – amitairos Feb 26 '18 at 13:17

Zze · Answer 2 · 2018-02-19T02:52:50.813

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.

Thanks. I edited with my code. blur doesn't work, I don't know why. Maybe I'm not using it correctly with my tabs. Also, I don't have a list of buttons, only tabs. So I used a tab instead of a button for adding a new tab. If you know how to put the button next to each tab, that would also be good. — amitairos, Feb 21 '18 at 08:19

Angular unfocus tab and set focus to different tab

2 Answers2