CODEWITHSUNDEEP
angular
Nadeem Bader
Nadeem Bader

Reputation: 223

Angular - reload tab on tab-click

In my angular component, I'm using tabs as shown here:

<mat-tab-group id="tabs" >
    <mat-tab label="Tab 1"> 
        <app-first-tab-content></app-first-tab-content>
     </mat-tab>
    <mat-tab label="Tab 2" > 
        <app-second-tab-content></app-second-tab-content>
    </mat-tab>
</mat-tab-group>

How can I reload the content of each tab when click on the tab title?

Upvotes: 0

Views: 3708

Answers (2)

Storytellerr
Storytellerr

Reputation: 805

By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initialize the child components but not inject them into the DOM until the tab is activated.

If you want to load component when user click on tab make it lazy loaded, like this:

<mat-tab label="First">
  <ng-template matTabContent>
    // your component here
    <app-first-tab-content></app-first-tab-content>
  </ng-template>
</mat-tab>

You can read more about lazyLoading here. Find a Stackblitz example here.

Upvotes: 4

Navitas28
Navitas28

Reputation: 777

I am not sure If I got your question right If you want to just reload the tabs with new content whenever a tab is clicked then just write the logic in ngOnInit lifecycle hook of your app-first-tab-content component

Upvotes: 0

Related Questions