向角材料中的选项卡组件添加取消按钮答案

【问题标题】：To add cancel button to tab component in angular material向角材料中的选项卡组件添加取消按钮
【发布时间】：2018-08-28 04:19:16
【问题描述】：

我正在使用标签组件（即带有自定义标签模板的标签）。这是stackblitz 链接。如何在标签的右上角添加取消按钮？我不想使用取消按钮执行任何操作，我只需要添加取消按钮。如下图所示

【问题讨论】：

只需将其添加到ng-template
我应该给ng-template添加任何图标吗？
如果您想要取消按钮上的图标？我不太确定问题是什么
[stackblitz.com/edit/angular-7p7ikc?file=app/…
请查看更新后的问题@user184994

标签： angular angular-material angular6

【解决方案1】：

看看这个，这里我添加了角材质按钮作为取消按钮。

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

Click Here

【讨论】：

【解决方案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>

【讨论】：