Hi Navaneeth, Am also having same issue. Were you able to fix this out? On Tuesday, December 19, 2017 at 8:33:23 PM UTC-5, Navaneetha Krishnan S wrote: > > 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.
