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.

Answer 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.

Answer 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