マットタブグループにボタンを追加

Question

私はアンギュラ2/4に新しく、マテリアルデザインコンポーネント（https://material.angular.io）を楽しんでいます。私は、ダイナミックビューを切り替えるためのタブグループを使用するシンプルなSPAを持っています。タブを追加するためのプラスボタンがあり、各タブは削除できます。

私の質問は、上部バー（タブが表示される）に「プラス」ボタンを含むようにマットタブグループを変更できるかどうかです。今はマットタブグループのdivの横にあるdivに位置しているので、ウェブページの右端全体に沿って20ピクセルを占めていますが、これはすごくうまく見えません。

Answer 1

1つの方法として、コンテンツを持たない別の無効なタブを追加し、クリックイベントをタブラベルのボタンにアタッチする方法があります。

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

奇妙なことは、タブラベルの幅だけです。私はその特定のものを減らす方法を見つけ出すことができませんでした。