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.