[AngularJS] Issue in loading dynamic components in individual angular tabs

[Navaneetha Krishnan S]

I have a requirement where I need to load the angular components 
dynamically inside a (/) 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 problem that I am facing is when I am trying to load components 
dynamically, its getting loaded in the first tab itself and not in thier 
respective tabs. Instead the expectation is the second component should be 
loaded on the second tab and not on the first tab. instead currently all 
the components are getting loaded in the first tab itself.

I have created a working POC on stackblitz 
<https://stackblitz.com/edit/angular-e7fnhd-rjckda?file=app%2FComponent1.ts> 
where 
the same issue can be reproduced

The parent component which hosts the angular tab

@Component({
  selector: 'home',
  template: `<mat-tab-group class="demo-tab-group">
  <mat-tab *ngFor="let tab of homepageTabs; let i = index" 
label="{{tab.label}}">
    <div class="demo-tab-content">
      <!--dynamic components i.e. Component1 and Component2 to be loaded 
here...-->
      <ng-container #placeholder>{{tab.templateRef}}</ng-container>
   </div>
  </mat-tab>
  </mat-tab-group>
  `
})
export class HomeComponent implements AfterViewInit {
    activeTabIndex: any;
    cmpRef: ComponentRef<any>;
    @ViewChild('placeholder', { read: ViewContainerRef }) target: 
ViewContainerRef;

    homepageTabs = [
      {
        label: 'HomeLabel',
        templateRef: null,
        tabTitle: 'HomeTitle'
      }
    ];

    constructor(private cfr: ComponentFactoryResolver)
    {
      this.activeTabIndex = 0;
    }

    ngAfterViewInit() {
      let factory = this.cfr.resolveComponentFactory(Component1);
      this.cmpRef = this.target.createComponent(factory);
      this.cmpRef.instance.CompclickEvent.subscribe((v) => { this.Compclick(v) 
});
      //this.homepageTabs.replace()
      //this.homepageTabs[0].templateRef = this.cmpRef;
    }

    Compclick(value: any) {
      this.activeTabIndex = this.activeTabIndex + 1;
      console.log("Event bubbled from the child component.");
      this.addTab("Child " + this.activeTabIndex, this.activeTabIndex);
    }

    addTab(tabTitle: any, tabPosition: any): void {
      let factory = this.cfr.resolveComponentFactory(Component2);
      this.cmpRef = this.target.createComponent(factory)
      this.activeTabIndex = tabPosition;
      this.homepageTabs.splice(tabPosition, 0, {
        label: tabTitle,
        templateRef: this.cmpRef,
        tabTitle: tabTitle
      });
    }
}

the First child component is as below

@Component({
  selector: 'Component1',
  template: `<div >Component1 Loaded, click on the button to load child 
component</div><button type="button" class="action-btn action-btn-default" 
style="float:left" (click)="compclicked()">Click</button><br/> `
})
export class Component1 {
  @Output() CompclickEvent = new EventEmitter();
  constructor(){
  }

  compclicked()
  {
    console.log("Clicked on child component, bubbling the event to the parent");
    this.CompclickEvent.emit();
  }
}

What is the mistake I am doing here? why all the components are getting 
loaded in the first tab itself?

-- 
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.