title: How to load a dynamic component in angular tab?
body: <p>I need to load the components dynamically into the tabs in angular. I have a parent component which has angular tabs in it. Inside the tab control, I need to load the child components dynamically. </p>
  
  <p>Initially when the Tabs are loaded it should be loaded with a component1, and on some user interactions it should trigger the event which would load additional tabs and other child components to be loaded inside it.</p>
  
  <p>My requirement is load any child components dynamically inside the each tabs.</p>
  
  <p>I am facing issues in loading the child components dynamically inside the tab and not understanding how to proceed further? </p>
  
  <p>I have created a POC for demo in <a href="https://stackblitz.com/edit/angular-e7fnhd?file=app%2Fhome.component.ts" rel="noreferrer">stackblitz</a> </p>
  
  <p>My Parent component is as follows:</p>
  
  <pre><code>    import {Component, ViewChild, AfterViewInit, TemplateRef, ComponentRef, ViewContainerRef} from '@angular/core';
      import { ComponentFactoryResolver } from '@angular/core';
      import { Component1 } from './Component1';
      import { Component2 } from './Component2';
  
      @Component({
        selector: 'home',
        template: `&lt;mat-tab-group class="demo-tab-group"&gt;
     &lt;mat-tab *ngFor="let tab of homepageTabs; let i = index" label="{{tab.label}}"&gt;
  
            &lt;!--Component1 and Component2 to be loaded here... what is the correct container object which can hold dynamic components ? --&gt;
  
            &lt;ng-template #container&gt;{{tab.templateRef}}&lt;/ng-template&gt;
  
      &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;`
      })
      export class HomeComponent {
        homepageTabs: any;
        @ViewChild('container', { read: ViewContainerRef }) dynamicTabPlaceholder;
  
        constructor(private cfr: ComponentFactoryResolver)
        {
  
          //Need to instantiate the components Component1 &amp; Component2 dynamically and load here into the homepageTabs List
          const factory = this.cfr.resolveComponentFactory(Component1);
          const componentRef = this.dynamicTabPlaceholder.createComponent(factory);
  
           this.homepageTabs = [
            {
              label: 'HomeLabel',
              //templateRef: Component1,//How to assign the component1 instance here?
              tabTitle: 'HomeTitle'
            },
            {
              label: 'App Details',
              //templateRef: Component2,
              tabTitle: 'App Details'
            }
          ];
        }
      }
  </code></pre>
  
  <p>My child component looks like below,</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
    selector: 'Component1',
    template: `Component1 Loaded
  
    &lt;md-list&gt;
    &lt;md-list-item class="md-2-line" ng-repeat="item in workbookSheetsList"&gt;
      &lt;md-checkbox ng-model="item.done"&gt;&lt;/md-checkbox&gt;
      &lt;div class="md-list-item-text"&gt;
        &lt;h3&gt;{{item.name}}&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/md-list-item&gt;
  &lt;/md-list&gt;
    `,
    //styleUrls: ['./tabs-template-label-example.css']
  })
  export class Component1 {
  
    workbookSheetsList = [{ "name": "TestReport" }, { "name": "SimpleReport" }, { "name": "Highlighting" }, { "name": "CalculatedColumns" }, { "name": "DateFormat" }, { "name": "KPIIndicator" }];
  
    constructor(){
    }
  }
  </code></pre>
  
  <p>I am getting the below error when I run the application, which indicates that I am not able to get the correct container reference to create/load the component?</p>
  
  <pre><code>TypeError: Cannot read property 'createComponent' of undefined
      at new HomePageComponent (homepage.component.ts:76)
      at createClass (core.es5.js:10946)
      at createDirectiveInstance (core.es5.js:10764)
      at createViewNodes (core.es5.js:12205)
      at createRootView (core.es5.js:12100)
      at callWithDebugContext (core.es5.js:13486)
  </code></pre>
  
  <p>I am struck here and not sure how to load the child components to be loaded inside a tab :-</p>
  
  <ol>
  <li>what would be the container object which can hold the dynamic components placed inside </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-tab-group class="demo-tab-group"&gt;
         &lt;mat-tab *ngFor="let tab of homepageTabs; let i = index" label="{{tab.label}}"&gt;
              &lt;div class="demo-tab-content"&gt;
                &lt;!--Component1 and Component2 to be loaded here... what is the correct container object which can hold dynamic components ? --&gt;
               
                &lt;ng-template #container&gt;{{tab.templateRef}}&lt;/ng-template&gt;
              &lt;/div&gt;
          &lt;/mat-tab&gt;
      &lt;/mat-tab-group&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>how to reference this container object and assign the dynamic components into it</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    {
        label: 'HomeLabel',
        //templateRef: Component1,//How to assign the component1 instance here?
        tabTitle: 'HomeTitle'
      },</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anybody help me with this issue and let me know how to proceed further?</p>
  
  <p><a href="https://stackblitz.com/edit/angular-e7fnhd?file=app%2Fhome.component.ts" rel="noreferrer">https://stackblitz.com/edit/angular-e7fnhd?file=app%2Fhome.component.ts</a></p>