CODEWITHSUNDEEP
angularangular-materialangular7
Jebathon
Jebathon

Reputation: 4561

Angular Material Tabs - Load/Unload components only when active tab is selected

Given the following code of MainComponent.html:

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <!-- Active Tab. This tab is shown first -->
    <app-users></app-users>
  </mat-tab>
  <mat-tab label="Managers">
    <app-managers></app-managers>
  </mat-tab>
</mat-tab-group>

There are two components that are both loaded and ran when this view is called. i.e. the ngOnInit for the ManagersComponent (the inactive tab) is called. 

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-managers',
    templateUrl: './managers.component.html',
    styleUrls: ['./managers.component.scss']
})
export class ManagersComponent implements OnInit, OnDestroy {

    constructor() { }

    ngOnInit() {
      //This is called when the MainComponent is loaded. 
    }

    ngOnDestroy() {

    }
}

Is there a way to load and destroy components so that only the active tab is loaded, and the inactive tabs don't load until they are clicked, and destroyed when left?

i.e. in the code snippet above the ngOnInit won't be loaded for ManagersComponent until the active tab is selected and when left the ngOnDestroy will be called

Upvotes: 17

Views: 18319

Answers (4)

Matthew Marichiba
Matthew Marichiba

Reputation: 2092

Just completing the example for the isActive mechanism that @Narm alludes to. Put a reference label on each matTab and then you can use its isActive property immediately to manually create/destroy each tab's content.

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users" #users>
    <!-- Active Tab. This tab is shown first -->
    <app-users *ngIf="users.isActive"></app-users>
  </mat-tab>
  <mat-tab label="Managers" #managers>
    <app-managers *ngIf="managers.isActive"></app-managers>
  </mat-tab>
</mat-tab-group>

I just solved my problem with this solution. It worked like a charm to ensure that only one component is alive at a time. Thanks!

Upvotes: 6

John Mersal
John Mersal

Reputation: 187

use 

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <ng-template matTabContent>
      <app-users *ngIf="!managerActive"></app-users>
    </ng-template>
  </mat-tab>
  <mat-tab label="Managers">
    <ng-template matTabContent>
       <app-managers *ngIf="managerActive"></app-managers>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Due to poor documentation of Angular Material, it was hard to find. But ng-template enables lazyloading for tabs. <ng-template matTabContent></ng-template>

Upvotes: -1

Narm
Narm

Reputation: 10834

You can use the *ngIf directive so that the components only gets loaded when the active tab is selected and then destroyed when it becomes inactive. An example would be something like:

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <!-- Active Tab. This tab is shown first -->
    <app-users *ngIf="!managerActive"></app-users>
  </mat-tab>
  <mat-tab label="Managers">
    <app-managers *ngIf="managerActive"></app-managers>
  </mat-tab>
</mat-tab-group>

From the Angular Material mat-tab documentation it looks like there is an isActive property you could use as the flag which would probably be the ideal way.

Upvotes: 7

Adrien PESSU
Adrien PESSU

Reputation: 557

you can use <ng-template> with the matTabContent attribute in the <mat-tab>

<mat-tab-group #tabGroup (selectedTabChange)="onTabClick($event)">
  <mat-tab label="Users">
    <ng-template matTabContent>
      <app-users></app-users>
    </ng-template>
  </mat-tab>
  <mat-tab label="Managers">
    <ng-template matTabContent>
      <app-managers></app-managers>
    </ng-template>
  </mat-tab>
</mat-tab-group>

see documentation

Upvotes: 32

Related Questions