3

I'm making a Tab View that can dynamically create tabs from a list of components. Also after those components have been added to the DOM I would like to be able to add them with a button.

Thanks to the help from the user, yurzui, I was able to make initial creating of components work( See here). The challenge is once the Tabs component is created I can't access the projectable nodes list to add the dynamically created tab to it.

Here is the plunk:

addTab(){
    //this.viewContainer.clear()

    let compFactory = this.compFR.resolveComponentFactory(FinalizeTab);
    let compRef = this.viewContainer.createComponent(compFactory);

    let tabFactory = this.compFR.resolveComponentFactory(Tab);
    let tabRef = this.viewContainer.createComponent(tabFactory,this.viewContainer.length - 1, undefined, [[compRef.location.nativeElement]]);
    tabRef.instance.title = compRef.name;


    this.transTabRefs.push(tabRef.location.nativeElement);
    this.tabsRef.instance.tabs.push(tabRef.instance)
    console.log("An array of tab references's elements to be the projectable nodes" ,this.transTabRefs);
    console.log("An array of tabs", this.tabsRef.instance.tabs.length);
}

I know I could probably just recreate the tabs component every time a tab is added like this:

    let tabsFactory = this.compFR.resolveComponentFactory(Tabs);

    let tRefs = this.viewContainer.createComponent(tabsFactory,0,undefined,[this.transTabRefs]);
    tRefs.instance.initContent(this.tabsRef.instance.tabs);

Although I would like to avoid this as these components could get very complex, and the load time might be unreasonable.

I feel like getting access to the projectable nodes directly after the component is created might be a stretch to ask that of the API. That in mind, I've looked to see if I might find some method on ComponentRef to help add the tab on this already instantiated TabsRef.

This is close:

this.tabsRef.location.nativeElement.tabs.push(tabRef.instance)

Sadly this doesn't work because tabs is undefined. If there is another approach I am missing I would be open to it. Or if this just isn't possible I would like to know that too.

Erik R
  • 201
  • 1
  • 15

0 Answers0