Angular 4 Material Tabs Load on Tab Select

Question

Is it possible to achieve lazy loading on Angular Material Tabs? Otherwise I would need a way to run a method when entering a tab.

Answer 1

You can use the selectChange event provided by . It fires when a tab selection is changed. From the documentation:

@Output() selectChange : Event emitted when the tab selection has changed.

In your template:

  Content 1
  
    This tab will load some morecontents after 5 seconds.
    
{{ moreContents }}
  

... and in your typescript code:

tabSelectionChanged(event){
    // Get the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Call some method that you want 
    this.someMethod();
}

Link to working demo.