How to dynamically rearrange Angular material tabs

Question

I have a group of 7 tabs (Angular material):

<mat-tab-group #tabGroup [selectedIndex]="selectedIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
    <mat-tab label="Tab 4">Content 4</mat-tab>
    <mat-tab label="Tab 5">Content 5</mat-tab>
    <mat-tab label="Tab 6">Content 6</mat-tab>
    <mat-tab label="Tab 7">Content 7</mat-tab>
</mat-tab-group>

I want to set an order for the arrangement of tabs based on some conditions.

So I want tab7, tab5, tab6, tab1, tab2 ,tab3, tab4 in a scenario.

I understand the selectedIndex will let us control the ACTIVE tab, but I want to control the order of the arrangement ( on load ) .

I have a lot of data communication between the parent and the tabs and hence am not using a *ngFor. Hence is there a solution without a *ngFor.

Does Angular material have the provision for this feature?

Answer 1

you can store all the tabs in the array and then OnInit sorts the array with the conditions you want.

or on any event onload etc.

and then, of course, loop them with the help of *ngFor directive.

Answer 2

There could be a way to do that, but whether it is suitable for your application I don't know. MatTab has a position property that should do this. But it is not an @Input , so to use it, you would have to use @ViewChild to access all your tabs (or use template references from HTML if that's possible). That's kind of clumsy, but it should work. For example (pseudo-code):

<mat-tab-group #tabGroup [selectedIndex]="selectedIndex"  >
    <mat-tab #tab1 label="Tab 1">Content 1</mat-tab>
    <mat-tab #tab2 label="Tab 2">Content 1</mat-tab>
    ...
</mat-tab-group>

----

@ViewChild('tab1') tab1;
@ViewChild('tab2') tab2;
...

changeTabOrder() {
    this.tab1.position = 2;
    this.tab2.position = 1;
    ...
}