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.