Angular mat-tab : content of only initial selected tab is loaded

Question

I am using mat-tab to display diagrams.

Each diagram is created with a query selector :

buildDiagram (stepName : string){

    let modeler = new Editor.default({
      container : document.querySelector('#diagram-'+stepName)
    });

In my component, I have a tab list :

steps = [
    {name: 'step1'},
    {name: 'step3'},
    {name: 'step2'}
  ];

For each tab, I create a diagram :

ngAfterViewInit():void {

for (let step of this.steps){
  this.flowsheetEditorService.buildDiagram(step.name) 
}

In my html, I'm trying to display the diagram of each tab like this :

<mat-tab-group 'class="diagramTabsContainer">

            <mat-tab *ngFor="let step of steps" [label] = "step.name">
    
                    <div [id]="'diagram-'+step.name" style='height: 74vh;'></div>
             
            </mat-tab>

  </mat-tab-group>

The problem is that only the diagram of the initial selected tab is displayed.

Can you help? Thank you.

score 2 · Answer 1 · answered Apr 22 '21 at 14:05

I would load the information on selectedTabChange() then load the information into the diagram. cause, indeed angular mat-tab are eagerly loaded, but :

Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated - Angular documentation

An example

    <mat-tab-group (selectedTabChange)="onTabChange($event)">
      <mat-tab *ngFor="let step of steps; let i = index" [label] = "step.name">
         <div [id]="'diagram-'+step.name" style='height: 74vh;'></div>
      </mat-tab>
    </mat-tab-group>

steps = [
    {name: 'step1'},
    {name: 'step3'},
    {name: 'step2'}
  ];

 constructor() {}

 onTabChange(event: MatTabChangeEvent) {
    this.buildDiagram(this.steps[event.index])
 }

buildDiagram (stepName : string){
    let modeler = new Editor.default({
      container : document.querySelector('#diagram-'+stepName)
    });
}

score 0 · Answer 2 · answered Jul 21 '21 at 03:37

I think a better solution is to use Lazy-loading in your and refactor the content in your mat-tab in a component and calling ngAfterViewInit in that component. e.g.

<mat-tab label="First">
  <ng-template matTabContent>
    Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
  </ng-template>
</mat-tab>

If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it is advised to lazy load the tab's content. Tab contents can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute.

Angular Documentation - Tabs - lazyloading

Angular mat-tab : content of only initial selected tab is loaded

2 Answers2