How can I load components added in tab using angular4?

angular-tabs-component example
mat-tab scrollable
mat-tab-group background-color
angular dynamic-tabs - stackblitz
mat-tab change event

I am working with angular4 and angular material2.

I have the following code

<md-tab-group color="primary">
        <md-tab label="Employee">
        <md-tab label="Department">
        <md-tab label="Attendance">

Now all the components are loaded initially but I want load the particular component whenever i'm selecting the corresponding tab.

NB. Angular Material has been recently updated and components have been renamed, e.g. <md-tab> is now <mat-tab>. DOC:

What you want is to lazy-load the tab contents. As per the Angular material docs, it doesn't seem to be possible at this time.

Here are some workarounds:

Option 1. Activate the child component's based on their tabgroup's selectedIndex property

<mat-tab-group color="primary" #tabGroup>
  <mat-tab label="Employee">
    <app-employee *ngIf="tabGroup.selectedIndex === 0"></app-employee>
  <mat-tab label="Department" #tabDepartment>
    <app-department *ngIf="tabGroup.selectedIndex === 1"></app-department>
  <mat-tab label="Attendance">
    <app-attendance *ngIf="tabGroup.selectedIndex === 2"></app-attendance>

Option 2. Listen to the selectedIndexChange() event on the tab group

And load some content dynamically in the event handler for this event.

Something like:

<mat-tab-group (selectedIndexChange)="loadDynamicContent()">
    {{ dynamicContent }}

I found this idea here:

Create a dynamic tab component with Angular, npm install -g @angular/cli//Generates an angular "tab-demo-app" app cd tab-​demo-app//Installs Angular Material, the Component Dev Kit (CDK), We will start by creating the TabService that will be used for adding the  In this article, I will show how to create tabs using Angular Material 2 and Angular 4 Routing. I will be using md-tab-nav-bar and md-tab-link to create my tabs. Below is the functionality I would


<mat-tab-group (selectedIndexChange)="selectTab($event)">
  <mat-tab label="Tab 1">
      <app-control1 *ngIf="selectedTab === 0"></app-control1>
  <mat-tab label="Tab 2">
      <app-control2 *ngIf="selectedTab === 1"></app-control2>

TS File

declare new property

selectedTab = 0;

update property on selected Index Change event

selectTab(event) {
this.selectedTab = event;

Dynamic Tab based application using Angular and Angular Material, Building tabs with web technologies usually ends up with having a use something like the following snippet to add tabs to an application:. That’s where the <tab> component comes into play (again). Inside the component we can simply ask for a parent Tabs dependency by using the new, much more powerful dependency injection system and get an instance of it. This allows us to simply use given APIs inside a child component.

An even cleaner solution is possible by using *matTabContent, which decorates the ng-template tags and reads out the template from it.

  <mat-tab label="Employee">
    <app-employee *matTabContent></app-employee>
  <mat-tab label="Department">
    <app-department *matTabContent></app-department>
  <mat-tab label="Attendance">
    <app-attendance *matTabContent></app-attendance>

Keep in mind that the every time you open a tab, the corresponding component will be (re)initialized.

Developing a tabs component in Angular, Angular Material tabs organize content into separate views where only one view can For more complex labels, add a template with the mat-tab-label directive <a> elements and uses the active property to determine which tab is currently active. calculations during initialization, it is advised to lazy load the tab's content. If you are working with Angular and need to refresh a component without navigation on another component without using window.location.reload() or location.reload(), you can use the following code

Tabs, This + icon is added on the tab header using iconCss property. Enter the new Tab heading and content details in the available text boxes, click 'Add Tab' button to  Instead, you need a way to load a new component without a fixed reference to the component in the ad banner's template. Angular comes with its own API for loading components dynamically. The anchor directivelink. Before you can add components you have to define an anchor point to tell Angular where to insert components.

How to Load Tab items dynamically in Angular Tabs component , DOC: What you want is to lazy-​load the tab contents. As per the Angular material docs, it doesn't seem to be  In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.. This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture.

How can I load components added in tab using angular4?, If a menu item is clicked and a tab with this component already exist, that tab Download bootstrap and ng-bootstrap into your Angular project by entering the Add bootstrap to the styles in the angular.json file, so the styles  As you can see, it is already possible to define tabs in a static manner, by using the my-tab component placed inside the <my-tabs>.We now want to extend this API in such a way that allows us to dynamically open new tab pages based on the user interaction.

  • @JsonK if i want load only once , just first time that tab is selected ,how to do it?