CODEWITHSUNDEEP
angularangular-materialangular6
PGH
PGH

Reputation: 2204

To add cancel button to tab component in angular material

I am using tab component (i,e tabs with a custom label template).Here is the stackblitz link.How can i add cancel button at the top-right corner of the tabs ? I don't want to perform any action with the cancel button,i just need to add the cancel button. like in below image

enter image description here

Upvotes: 1

Views: 8325

Answers (2)

Akj
Akj

Reputation: 7231

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>

Upvotes: 2

Sakkeer A
Sakkeer A

Reputation: 1100

Check out this, Here i add angular material button as cancel button. 

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

Click Here

Upvotes: 2

Related Questions