Чтобы добавить кнопку отмены к компоненту вкладки в угловом материале

Question

Я использую компонент вкладок (т.е. вкладки с пользовательским шаблоном метки). Вот ссылка stackblitz . Как добавить кнопку отмены в верхнем правом углу вкладок? Я не хочу выполнять никаких действий с помощью кнопки отмены, мне просто нужно добавить кнопку отмены. как на изображении ниже

Answer 1

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>

Answer 2

Проверьте это, здесь я добавляю кнопку углового материала в качестве кнопки отмены.

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

Нажмите здесь