[AngularJS] How to load the angular components dynamically in a angular Tab

[Navaneetha Krishnan S]

I have a requirement where I need to load the angular components 
dynamically inside a (<md-tab-group>/<md-tab>) tabs. By default when the 
page loads I wanted to load a component and on some user interaction the 
other components to be loaded by bubbling the already loaded components 
event trigger.

The tabs can grow dynamically based on user interaction and each tab would 
be loaded with a dynamic component in it. It might happen that the same 
component can be loaded in multiple tabs with different contents being 
populated based on the @Input parameter being passed into it.

Note:

   1. 
   
   I need to pass both @input and @Output parameters i.e. the events can be 
   bubbled out to the parent to do some functionalities etc.
   2. 
   
   When the user switch across the tabs, the components should not reload 
   every time, the contents should be static/stable
   
To accomplish this, I have placed a <md-tab> selector. Using the @ViewChild 
I plan to get the reference of this container which can hold the dynamic 
content/component. But the issue I am facing here is I am not able to get 
the reference of this container object and I am getting the below mentioned 
error:

Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' 
of undefined
TypeError: Cannot read property 'createComponent' of undefined
    at new HomePageComponent (main.bundle.js:1543)
    at createClass (vendor.bundle.js:110571)
    at createDirectiveInstance (vendor.bundle.js:110396)
    at createViewNodes (vendor.bundle.js:111837)

The component which holds the tab-group/tabs is below

<div fxLayout="column" fxLayout.gt-sm="row">
  <md-tab-group class="tab-group" dynamicHeight 
[(selectedIndex)]="activeTabIndex" style="width:100%; height:100%">
    <md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
      <ng-template mdTabLabel>{{tab.label}}</ng-template>

      <!-- This is the container to hold the dynamically loaded components -->
      <ng-container #target></ng-container>

    </md-tab>
  </md-tab-group>
</div>

The code component looks like below:-

export const entryComponentsMap = {
  'applicationListComponent': ApplicationListComponent,
  'pivotGrid': PivotGrid
};


export class HomePageComponent implements OnInit {
    @ViewChild('target', { read: ViewContainerRef }) target: any;

    dynamicTabs = [
        {
          label: 'Home',
          content: 'Home',
          reportName: 'Home',
          showComponent: 'ApplicationList'
        }
    ];
    constructor(private router: Router,
        private vcRef: ViewContainerRef,
        private resolver: ComponentFactoryResolver) 
    {

    }

    ngOnInit(): void {
        //Trying to create a dynamic instance of the component and load it into 
the #target container object which is placed inside the md-tab
        const factory = 
this.resolver.resolveComponentFactory(entryComponentsMap.applicationListComponent);
        const compRef = this.target.createComponent(factory);

        //This is catch the bubbling of the event from the child component
        compRef.instance.openReportListEvent.subscribe((v) => { 
this.OpenReportListEvent(v) })
    }

    //This event would be called by the bubbling of the event from the child 
component which is again going to add a new tab with a dynamic component in it
    addTab(tabName: any, componentType: any): void {
        this.dynamicTabs.splice(this.addTabPosition, 0, {
          label: tabName,
          content: 'tabName',
          reportName: '',
          showComponent: componentType
        });

        const factory = 
this.resolver.resolveComponentFactory(entryComponentsMap.pivotGrid);
        const compRef = this.target.createComponent(factory);
    }
}

My dynamic component which needs to be loaded inside the tab looks like 
below:

@Component({
  selector: 'ApplicationListComponent',
  template: `ApplicationListComponent Loaded`
})
export class ApplicationListComponent {
  constructor(){
  }
}

To explain this issue, i have created a POC 
<https://stackblitz.com/edit/angular-e7fnhd-gq3czm?file=app/home.component.ts> 
on 
(This POC has all the required code, though the actual is not replicated in 
this.)

I need help in fixing this issue, should be able to load components 
dynamically, pass input/output parameters to it, what is the mistake I am 
doing here? any help would be much appreciated.

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.