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?
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.
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
