CODEWITHSUNDEEP
javascriptangularangular-materialangular6
Abdus Sattar
Abdus Sattar

Reputation: 289

Controlled rendering of contents of Tabs in angular material tabs

I am using Angular Material tab group.

<mat-tab-group>
  <mat-tab label="First"> <app-home> </app-home> </mat-tab>
  <mat-tab label="Second"> <app-info> </app-info> </mat-tab>
  <mat-tab label="Third"><app-details> </app-home> </mat-tab>
</mat-tab-group>

In ngOnInit(){} of each component I am calling one or more APIs and when my app-component renders tab group. contents of all tabs are getting loaded asynchronously, for this, all the APIs of all components are getting called. which is degrading efficiency.

I want to control rendering of contents of tabs so that only the selected tab is rendered. by this I can stop all other APIs from being called unnecessarily.

Can anyone help me by guiding to an appropriate event or technique to achieve this?

Upvotes: 3

Views: 6269

Answers (2)

Abhishek Rathore
Abhishek Rathore

Reputation: 1186

Another approach that is useful if you want to refresh the tab content when tab changed is to use ng-template with matTabContent. Example,

<mat-tab-group>
  <mat-tab label="A">
    <ng-template matTabContent> Content of tab A </ng-template>
  </mat-tab>
  <mat-tab label="B">
    <ng-template matTabContent> Content of tab B </ng-template>
  </mat-tab>
</mat-tab-group>

Upvotes: 12

Malindu Sandaruwan
Malindu Sandaruwan

Reputation: 1517

HTML 

<mat-tab-group (selectedTabChange)="onTabClick($event)"

TS

public onTabClick(event: any): void { // clicked tab can be get using event.index
    // load data for the clicked tab
}

Upvotes: 3

Related Questions