title: Lazy load the ng-content of an Angular component
body: <p>I created a Tabs component used as follows (<a href="https://stackblitz.com/edit/angulartabs" rel="nofollow noreferrer">Online example</a>)</p>
  
  <pre><code>&lt;tabs&gt;
    &lt;tab title="tab 1" active="true"&gt;Content 1&lt;/tab&gt;
    &lt;tab title="tab 2"&gt;Content 2&lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>The Tabs Component HTML is as follows:</p>
  
  <pre><code>&lt;div class="head"&gt;
    &lt;ul class="tabs"&gt;
      &lt;li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active"&gt;
        &lt;a&gt;{{ tab.title }}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;ng-content&gt;&lt;/ng-content&gt;
  </code></pre>
  
  <p>How to lazy load each Tab content (load it when the Tab becomes active)?</p>
  
  <p>The Tabs component code is:</p>
  
  <pre><code>export class TabsComponent implements AfterContentInit {
  
    @ContentChildren(TabComponent) tabs: QueryList&lt;TabComponent&gt;;
  
    select(tab: TabComponent) {
      this.tabs.toArray().forEach(tab =&gt; tab.active = false);
      tab.active = true;
    }
  
    ngAfterContentInit() {
  
      let actives = this.tabs.filter((tab) =&gt; tab.active);
  
      if(actives.length === 0) 
        this.select(this.tabs.first);
  
    }
  
  }
  </code></pre>
  
  <p>And the Tab component code is:</p>
  
  <pre><code>export class TabComponent {
    @Input() active: boolean;
    @Input() title: string;
  }
  </code></pre>