매트 - 탭 - 그룹에 버튼 추가

Question

저는 Angular 2/4에 처음 입문했으며 머티리얼 디자인 요소 (https://material.angular.io)를 즐기고 있습니다. 동적 뷰 간 전환을 위해 탭 그룹을 사용하는 간단한 SPA가 있습니다. 더 많은 탭을 추가 할 수있는 더하기 버튼이 있으며 각 탭은 삭제 될 수 있습니다.

제 질문은 매트 탭 그룹이 상단 바 (탭이 나타나는 곳)에 "더하기"버튼을 포함하도록 변경 될 수 있는지입니다. 지금은 매트 탭 그룹 div 옆에있는 div에 있으므로 내 웹 페이지의 오른쪽 전체를 따라 20 픽셀을 차지합니다. 그리 좋아 보이지는 않습니다.

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

유일하게 이상한 것은 탭 라벨의 너비입니다. 나는 그 특정한 것을 줄이는 방법을 알아낼 수 없었다.