CODEWITHSUNDEEP
angularangular-materialangular2-md-tabs
Sh_88
Sh_88

Reputation: 21

Scroll to the last tab after adding a new tab in Angular Material Md-tabs

I have an implementation where I have the ability to add new md-tabs. The tabs are lying horizontally like a menu. When I click on the "add tab" button, the md-tabs should scroll to the last one(to the newly added one). How to achieve this?

Upvotes: 0

Views: 366

Answers (1)

Engam
Engam

Reputation: 1061

For material 2 you can use, with 2 way binding on selectedIndex, [(selectedIndex)]="number".

If your add tab button pushes a new Object into an array, you can write

 <mat-tab-group [(selectedIndex)]="tabArray.length">
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      The Second Content
    </ng-template>
  </mat-tab>
</mat-tab-group>

<button mat-button (click)="pushNewTab('three')>Add tab</button>

And in component

public tabArray = ['one', 'two']
public pushNewTab(newtab) {
  this.tabArray.push(newtab);
}

Upvotes: 1

Related Questions