How to dynamically rearrange Angular material tabs

1
votes

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?

2
angulartypescripttabsangular-material2
How many scenarios are you talking about? Just one or two or are they going to be able to arrange them in any order they want? – Mitch McCutchen
I have 3 scenarios. On load, the tabs arrangement will be done. ( not any order ) Basically hardcode the order in UI code. – prabhat gundepalli

2 Answers

1
votes

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.

1
votes

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;
    ...
}