0

In a angular i added a tab control, but list of available tabs i will get from backend. so i added a code to display template base on some key . but every time when i switch a tab, I can see OnInit event for a new tab and for a current. I dont need to load a current tab infor again, so, perfectly, it should call onDestroy for a current tab and OnInit for a new.

<mat-tab-group disableRipple (selectedTabChange)="tabChange($event)">
<ng-container *ngFor="let info of tabs">
  <mat-tab [label]="info.title">
    <ng-template matTabContent>
      <ng-container *ngIf="selectedTab == 'step1'">
        <app-step1></app-step1>
      </ng-container>
      <ng-container *ngIf="selectedTab == 'step2'">
        <app-step2></app-step2>
      </ng-container>
      <ng-container *ngIf="selectedTab == 'step3'">
        <app-step3></app-step3>
      </ng-container>
    </ng-template>
  </mat-tab>
</ng-container>
</mat-tab-group>

i tried to do instead of ngIf add a [hidden] attribute and tried to do a switch, but still not correct behaviour for me

added a code with an issue. stackblitz

Ulana
  • 353
  • 1
  • 2
  • 9

2 Answers2

1

If you want to use ngIf, you just need to check on the tab tabKey in your ngIf and not the selected tab. Simple logic if the tab tabKey is step1 then render the step1 component and so on. Mat tab takes care of rendering the active tab content.

Even if you use the hidden solution or display none, mat tab rerender the active component and destroy the previous selected ones.

<mat-tab-group disableRipple (selectedTabChange)="tabChange($event)">
  <mat-tab *ngFor="let info of tabs" [label]="info.title">
    <ng-template matTabContent>
      <app-step1 *ngIf="info.tabKey == 'step1'"></app-step1>
      <app-step2 *ngIf="info.tabKey == 'step2'"></app-step2>
      <app-step3 *ngIf="info.tabKey == 'step3'"></app-step3>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Here is my working stackblitz example

Mehyar Sawas
  • 1,187
  • 6
  • 15
0

I have encountered a similar issue and our solution was to apply display: none on the tabs instead of *ngIf to prevent re-rendering.

.html

<mat-tab-group disableRipple (selectedTabChange)="tabChange($event)">
<ng-container *ngFor="let info of tabs">
  <mat-tab [label]="info.title">
    <ng-template matTabContent>
      <ng-container [class.hide-tab]="selectedTab !== 'step1'">
        <app-step1></app-step1>
      </ng-container>
      <ng-container [class.hide-tab]="selectedTab !== 'step2'">
        <app-step2></app-step2>
      </ng-container>
      <ng-container [class.hide-tab]="selectedTab !== 'step3'">
        <app-step3></app-step3>
      </ng-container>
    </ng-template>
  </mat-tab>
</ng-container>
</mat-tab-group>

.css

.hide-tab {
  display: none;
}

Note: This means that all of your tabs will load on page load, but only the content one of them will be shown at a time. If you don't want this to happen you may need to apply some more conditional logic and a combination of *ngIf and display: none

nate-kumar
  • 1,675
  • 2
  • 8
  • 15
  • Just try this and now i can see in the log all 3 OnInit and OnDestroy – Ulana Oct 31 '22 at 19:04
  • Yes correct, that was what I referenced in my note. However I have realised I have misunderstood your question, my answer is for the scenario in which you never want any OnDestroy to be triggered when switching tabs (to prevent content reinitialising). That was not the question you asked, you still wanted OnDestroy to be called on the previous tab. Mehyar's solution is therefore perfectly good – nate-kumar Nov 01 '22 at 06:35