Angular Tab Component Overview

Declare a Template within a Template using `ng-template` in Angular

Pass a Reference of an ng-template to a Component and Render it in Angular

Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular

Define an Anchor Point Where to Render Dynamic Components in Angular

Dynamically Instantiate an Angular Component

Destroy a Dynamically Instantiated Angular Component

Create Dynamic Components in Angular

We’ve seen how to pass along a reference to a template to an Angular component and how to render it. Templates without actual dynamic data are boring however. Therefore in this lesson we learn how to leverage `ngTemplateOutletContext` to pass in data to an `ng-template`.

https://app.egghead.io/api/v1/lessons/angular-pass-data-to-a-dynamic-ng-template-using-ngtemplateoutletcontext-in-angular/subtitles

Instructor: [00:00] Here we have to find a reusable template within our app-root component here by using the ng-template.

[00:06] We have assigned it a personAddedToTemplate variable, such that we can then reference it and pass it ahead to the ngx-tab component. Inside that ngx-tab component, we then took in the template via that input here and we rendered it out by using the ng-container, specifically leveraging here that ngTemplateOutlet property of that container.

[00:28] While this works perfectly -- as you can see, the content gets rendered properly -- we would really like to bring this a bit further, in that we can pass in some data from the outside and render that data dynamically. I want to have my template as independent as possible, so I'm not going to, for instance, directly reference that People here. I rather want that the component which is rendering the template passes in the data itself.

[00:54] To achieve that, let's jump to our tab component again. First of all, we will pass our data from the outside, so, again, we need an input here. Let's call this dataContext or something like that. To pass on this data onto our template, we have another property, which is called ng-templateOutletContext, and here we can then pass on our data context.

[01:17] Usually, you use an object here, such that you can then extend it later on if you have different kind of data which you want to pass into our template. In our case, let's call it simply Data, and we reference our data context. Now our tab component is ready. Let's jump back to our app component again.

[01:36] Inside here, we can now leverage that dataContext which we have passed in. First of all, we obviously need to pass it along. We use here dataContext. Our specific situation here, I'm referencing the first person of that people array which we have in our component here, further down. That data gets passed in, and then, inside the ngx-tab component, we'll pass it along to our template, which, in this case, resides here.

[02:02] Now we can leverage that data object which we passed in and use it inside our component here. Assume we want to have something like that, so I want to say here, "Hi, I'm..." and then I want to pass in the person, so the person gets passed into our template. I want to visualize that person's name, so I would do something like person.name.

[02:22] I use here the [inaudible] syntax, because the person could obviously be undefined. As you can see, the compiler complains here, because that person doesn't exist. It's not a variable which is known by this template here. We can define this variable simply by using here the let-, and then the name, which is in this case Person. Obviously, we have to give it also a value here, which, in this case, will be Data.

[02:47] It's important to know that this Data is actually the one which we have named inside here. Whenever we pass on the data here, we gave it an object structure with a name -- the key here is Data -- and that's exactly the same one which we can then reference here and assign it to our local Person variable.

[03:06] Once the browser refreshes, if we jump back to the top two, you can see now that the name gets properly visualized.

Pass Data to a Dynamic ng-template using ngTemplateOutletContext in Angular

Share this video with your friends

Course

Create Dynamic Components in Angular