Define an Anchor Point Where to Render Dynamic Components in Angular
When we dynamically instantiate a component, we obviously have to know where to place such component within another component’s template.
For that purpose we will learn how to use a custom directive which exposes a ViewContainerRef and serves us as an anchor point we can then reference later.
We also explore a second variant, using a simple template variable and a @ViewChild which just exposes the ViewContainerRef.
Instructor: [00:00] now, we have our ngx-tabs component, which renders different kinds of tabs, which are defined here statically. They are basically, via the content projection mechanism, imported into our tabs component here and rendered out below here.
[00:12] Now, what we would like to achieve is obviously to go into a more dynamic direction where we can define here different templates inside here, and then dynamically inject such ngx-tab components, which use our templates.
[00:26] First step for doing so is to give here another region, which we have already seen by using an ng-template. This will be the region where we want to inject our dynamic components later on, but first of all, we need to have a way for referencing this ng-template. Furthermore, we need to get access to the so-called ViewContainerRef, which will then allow us to create components dynamically.
[00:47] Let's go step by step. Let's use the Angular CLI and generate a new directive, which will serve us as an anchor point. Now, let's try and put a dynamic tab anchor directive. This is a plain, normal directive. We actually only use it for the ViewContainerRef. Let's, first of all, import the ViewContainerRef. We can then inject it directly here.
[01:12] We can then use this directive later on to basically access this view container, which is here a public member of this directive.
[01:20] We can now go back to our tabs component. As a first step, we obviously need to import our dynamic tab anchor directive here. Then we can go to our ng-template and actually apply it.
[01:30] We use here the app dynamic tab anchor. Inside our tab component's code, we can use the view chart and grab all instances of such dynamic tab anchor directives. Let's call it "dynamic tab placeholder," and it's obviously an instance of such a dynamic tab anchor directive.
[01:49] Once we have that, we can now create here an open tab method, which will then be called from the outside. For now, let's simply log out the ViewContainerRef of our dynamic tab anchor directives.
[02:02] Great. Finally, let's also call it "open tab method" from our app components here. As you can see here, I'm using an app people list, which already renders such a button. We can simply hook onto that event here, have to add person, and call it "on add person."
[02:18] You obviously also have to implement that in our component here. What we do here is to simply call our tabs component and open tab function, which we've just created. The tabs component, as you can see, is already here being grabbed via our view chart again. Now, we save and open up here dev-tools. If I click "Add new person," we can see that the ViewContainerRef gets properly printed out.
[02:44] Another example we have created such a dynamic top anchor directive, which we have then applied to our template for later accessing the view container. This is one approach.
[02:54] Another approach would be to define here a template variable and, again, accessing it via a view chart instruction here, but by also adding here an option where we say, "Read only the ViewContainerRef."
[03:10] That would be an alternative approach of how to define an anchor inside a template.