Angular material tabs with custom components

Question

I have a list of objects that I use to create material tabs as such:

  <mat-tab-group>
    <mat-tab *ngFor="let tripOption of tripOptions">
      <ng-template mat-tab-label>
        <mat-icon class="svg-frq-light-blue new-trip-image" svgIcon="{{tripOption.name}}"></mat-icon>
      </ng-template>

        //component would go here

    </mat-tab>
  </mat-tab-group>

I need to add a separate angular component to each tab. Is there a way through which i can maybe add a component on each tripOption object and then somehow embed it here from said object? Is there a decent way to do this or do I have to actually write a tab for each item in the list?

Answer 1

You could go with Angular native ngSwitch for appending the different components to each tab according to your business logic, and then leave the common parts out of ngSwitch. Something like that:

<mat-tab-group>
    <mat-tab *ngFor="let tripOption of tripOptions">
        <ng-template mat-tab-label>
            <mat-icon class="svg-frq-light-blue new-trip-image" svgIcon="{{tripOption.name}}"></mat-icon>
        </ng-template>

        <h1>Common code</h1>
        <ng-container [ngSwitch]="tripOption.name">
            <app-brazil-trip *ngSwitchCase="'Brazil'"></app-brazil-trip>
            <app-indonesia-trip *ngSwitchCase="'Indonesia'"></app-indonesia-trip>
            <app-chile-trip *ngSwitchCase="'Chile'"></app-chile-trip>
            <span *ngSwitchDefault>Trip not found!</span>
        </ng-container>
    </mat-tab>
</mat-tab-group>

Answer 2

Use innerHTML binding with some logic in your component.

Something like this might work:

<div [innerHTML]="myComponentStr(tripOption.id)"></div>

More info: https://alligator.io/angular/innerhtml-binding-angular/

Answer 3

You need to try this tabs, https://www.npmjs.com/package/@codehint-ng/tabs

This controls allows to place contents of the tabs flexibly and separetely