Angular - load the tab name and component dynamically

Question

In my application, I want to load the tab name and component dynamically .

Below JSON data contains tab name and tab links

"menu" : {
     "First": "link1",
     "Second": "link2",
     "Third": "link3"
}

Links are configured angular router file like below

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'link1', component: HomeComponent},
  { path: 'link2', component: UserPreferenceComponent},
  { path: 'link3', component: TableComponent },
  { path: '**', redirectTo: '' }
];

I want to load the tab based on the link where configured in JSON.

<mat-tab-group>
    <mat-tab label="First"> <!--Link 1 component --> </mat-tab>
    <mat-tab label="Second"> <!--Link 2 component --> </mat-tab>
    <mat-tab label="Third"> <!--Link 3 component --> </mat-tab>
</mat-tab-group>

Link 1 component means <app-home></app-home>

Can someone please let me know how to achieve this?

Answer 1

use Object.entries

Method 1: without routing

app.component.html

<mat-tab-group>
    <mat-tab *ngFor="let tab of obj" [label]="tab[0]">
        <app-home *ngIf="tab[1] == 'link1'"></app-home>
        <app-user-preference *ngIf="tab[1] == 'link2'"></app-user-preference>
        <app-table *ngIf="tab[1] == 'link3'"></app-table>
    </mat-tab>
</mat-tab-group>

app.component.ts

  matTabs: any = {
    menu: {
      First: "link1",
      Second: "link2",
      Third: "link3"
    }
  };
  obj: any;

  constructor() {
    this.obj = Object.entries(this.matTabs.menu);
  }

Method 2: with routing

app.component.html

<mat-tab-group (selectedTabChange)="tabChange($event)">
     <mat-tab *ngFor="let tab of obj;" [label]="tab[0]">
     </mat-tab>
</mat-tab-group>
<router-outlet></router-outlet>

app.component.ts

matTabs: any = {
    menu: {
      First: "link1",
      Second: "link2",
      Third: "link3"
    }
  };
  obj: any;

  constructor() {
    this.obj = Object.entries(this.matTabs.menu);
  }

  tabChange(evt: MatTabChangeEvent) {
    this.router.navigate([this.matTabs.menu[evt.tab.textLabel]]);
  }

Here the stackblitz example:

https://stackblitz.com/edit/angular-mat-tab-active-xfa7n7?file=app/tabs-template-label-example.ts

Hope this helps:)

Answer 2

You can make the setter and getter function on your service to set the tab name and get the name of activated tab

Answer 3

    @Injectable({
        providedIn: 'root'
    })
    export class OrderService {
    
        activeTab: string = '';

        constructor() { }
        
        tabSetter(args: string): void {
            this.activeTab = args;
        }
    
        tabGetter(): string {
            return this.activeTab;
        }
    }

/////////// Inject the service into your component ////////

activeTab: string = '';
constructor(private service: OrderService) {
this.activeTab = this.service.tabGetter();