1

I am using angular & material for my tab, Below is my tab code.

Right now it is loading all the three tabs on single shot. But I need to load this component on click only. I saw the we have option to capture the click event. But I don't know to load the component on click of the tab.Please help me to load the component on clik

<mat-tab-group>
  <mat-tab label="Region"> 
    <app-region><app-region>
  </mat-tab>
  <mat-tab label="Country"> 
    <app-country><app-country>
  </mat-tab>
  <mat-tab label="State"> 
  <app-state><app-state>
  
  </mat-tab>
</mat-tab-group>
0

2 Answers 2

7

From the documentation:

Tab contents can be lazy loaded by declaring the body in a ng-template with the matTabContent attribute.

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

You should use <ng-template matTabContent>:

<mat-tab-group>
  <mat-tab label="Region">
    <ng-template matTabContent>
      <app-region><app-region>
    </ng-template>
  </mat-tab>
  <mat-tab label="Country">
    <ng-template matTabContent>
      <app-country><app-country>
    </ng-template>
  </mat-tab>
  <mat-tab label="State">
    <ng-template matTabContent>
      <app-state><app-state>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.