I was using dynamic component loader to read the component names from an array that is populated by a service and then load the components on the page.
I was using loadIntoLocation method of the API but as it's not present in the latest version of angular, I need to replace it with @ViewChild for the latest version.
Here is a working plunker example I found on some other thread that uses resolveComponent to add components dynamically.
(Please see the plunker link as a comment below. As I'm typing this on a mobile device I can't insert code and without code I'm not able to insert the plunker link)
However, I'd like to change the implementation slightly. Right now, app.ts passes the array of components to be loaded to the Tabs component. Here, I use the @ViewChild to load all the components on the page.
What I'd like to do is that I would want to pass a @ViewChild reference from app.ts as well so that I can define the:
<div #target></div>
(where components should be rendered) inside App.ts file. Right now it is present inside the Tabs.ts but I don't want to define it inside the Tabs component. I want to make Tabs.ts as a base class of sorts that other components can use to dynamically load their components.
So, in essence, every component will have its own template like:
//Component 1
Template: <div #left></div>
<div #right></div>
@ViewChild('left') child1
@ViewChild('right') child2
(Now pass these ViewChild references child1 and child2 to the component builder Tabs component so that I can control from component1 where to render these children)
//Do this for multiple components
