Add buttons to mat-tab-group

Question

I am brand new to Angular 2/4 and have been enjoying the Material Design components (https://material.angular.io). I have a simple SPA which uses a tab group for switching between dynamic views. I have a plus button for adding more tabs and each tab can deleted itself.

My question is whether the mat-tab-group can be altered to contain the "plus" button in the upper bar (where the tabs appear). Right now it sits in a div beside the mat-tab-group div, and thus takes up 20px along the whole right side of my web-page, which does not look terribly nice.

Solution 1

One approach would be to add another disabled tab with no content and attach the click event to a button in the tab label.

<mat-tab-group>
    <mat-tab label="Tab 1">Tab 1 Content</mat-tab>
    <mat-tab label="Tab 2">Tab 2 Content</mat-tab>
    <mat-tab disabled>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="someFn()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>

The only odd thing is the width of the tab label. I haven't been able to figure out how to reduce that specific one.

Solution 2

Did that in my styles.css to remove the disabled style and reduce the size of the tab:

my-component .mat-tab-labels :last-child.mat-tab-label {
  min-width: 0;
  padding: 0 12px;
  color: unset;
  opacity: unset;
}

Where "my-component" is the html selector of your component.

look like this : tabs with add button

Comments

[Tanmoy Bhattacharjee]

How to select the latest created tab?

[Jared]

I haven't tested it but looking at the MatTabGroup API, there is an input called selectedIndex that you may be able to set on that component. For example, <mat-tab-group [selectedIndex]="1"> where 1 would be replaced with a dynamic way to retrieve the new tab index.

[Walter Luszczyk]

A trick by disabling is cool. Without this I had problems that tab with "+" was displayed, but in fact there was no data there. Thanks!

[eriksmith200]

Is there a way to make the button in the disabled tab, not look disabled?

[Awais]

Any other way for adding button in mat-tab? I am using angular material

[Awais]

As i have nested tabs also so it not doing exactly what i want.

[Ollie]

I got it to work using my-component ::ng-deep .mat-tab-labels :last-child.mat-tab-label