CODEWITHSUNDEEP
angularangular-material
Sorin Grecu
Sorin Grecu

Reputation: 1034

Angular 2 adding button to md-tab-group

Is it possible to add a button or an icon to md-tab-group? I have the following template for example:

<md-tab-group  [selectedIndex]="selectedIndex">

  <md-tab *ngFor="let tab of getTabs() let i=index">

    <ng-template md-tab-label>
      {{tab.title}} <md-icon class="tabRemove" (click)="removeTab(i)">close</md-icon>
    </ng-template>

    <tab [tabData]="tab"></tab>
  </md-tab>
</md-tab-group>

I tried adding a button in the md-tab-group but it is not showing up. Is this even possible or should I find another way?

Upvotes: 1

Views: 1707

Answers (2)

Shashan Sooriyahetti
Shashan Sooriyahetti

Reputation: 878

You can add a button after <md-tab-group></md-tab-group> and change css position to needed position and give a z-index of 10:

button{
 postion:absolute;
 top:0;
 right:0;
 z-index:10;
}

Upvotes: 1

Bardez
Bardez

Reputation: 88

It's Possible.

I'm working with this scope too. Just add a new md-tab tag

My code: 

    <md-tab-group class='fixSize' [selectedIndex]='currentTab'>
        <md-tab *ngFor="let tab of tabs; let i = index;">
           <ng-template md-tab-label>
              <div class="tabName" (click)="tabRender(i)" (dblclick)="editTab(i)" mdTooltip="Duplo clique para editar" [mdTooltipPosition]="toolTipDirection">{{tab.name}}</div>
              <div *ngIf="tab.closable" class="delete" style="float: right;" (click)="removeTab(i)">x</div>
           </ng-template>
        </md-tab>
        <md-tab>
            <ng-template md-tab-label>
               <div class="tabAdd" (click)="tabAdd()" mdTooltip="Adicionar Tab" [mdTooltipPosition]="toolTipDirection">+</div>
            </ng-template>
        </md-tab>
    </md-tab-group>

Upvotes: 2

Related Questions