Angular 2 material tabs - content loading on tab active only

Question

Just a simple question. I want to implement Angular 2 Material Tabs in a way that each tab content it is initialized only when the corresponding tab is set to active.

This is what I use. https://material.angular.io/components/tabs/overview

Answer 1

I've done this, and works for me

export class TabComponent implements OnInit {
  private tabs = {
    selectedIndex: 0
  };
  constructor() { }

  ngOnInit() {
    this.getData(0);
  }

  selectChange($event: MdTabChangeEvent) {
    this.getData($event.index);
  }

  getData(index) {
    Observable
     .create(observer => setTimeout(() => observer.next(index), 0))
     .subscribe(index => {
      this.tabs[index] = true;
    });
  }
}