在角形材质的选项卡组件中添加取消按钮

Question

我正在使用选项卡组件（即具有自定义标签模板的选项卡）。这里是stackblitz链接。如何在选项卡的右上角添加取消按钮？我不想使用“取消”按钮执行任何操作，我只需要添加“取消”按钮即可。 就像下面的图片一样

Answer 1

检查一下，这里我添加了角形材质按钮作为取消按钮。

    <div class="button-row" style="float:right">
      <button mat-flat-button>Basic</button>
    </div>

Click Here

Answer 2

DEMO

HTML：

<div style="float:left">
    <mat-tab-group style="width:98%;">
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="example-tab-icon">thumb_up</mat-icon>
                First
            </ng-template>
            Content 1
        </mat-tab>

        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="example-tab-icon">thumb_up</mat-icon>
                Second
            </ng-template>
            Content 2
        </mat-tab>

        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="example-tab-icon">thumb_up</mat-icon>
                Third
            </ng-template>

            Content 3
        </mat-tab>

    </mat-tab-group>
</div>
<div style="width:2%;" style="float-right; ">
    <button style="position:fixed;" mat-icon-button>
    <mat-icon >cancel</mat-icon>
  </button>
</div>