Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Define an Anchor Point Where to Render Dynamic Components in Angular

    Juri StrumpflohnerJuri Strumpflohner

    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.

    angularAngular
    5 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss