Pass a Reference of an ng-template to a Component and Render it in Angular
For now, our TabComponent which renders a single tab within our TabsComponent container uses an ng-content component to render the content defined by the developer via Angular’s content projection mechanism. In this lesson we extend the tab to be able to take some variable template defined via ng-template and render it inside our tab using <ng-container> and ngTemplateOutlet.
Instructor: [00:00] As you can see here, what we have done is we have defined an ng-template, which is a template which can live within another template and, as you can see, doesn't get rendered.
[00:10] We assigned here a template variable, which is personAdded, and we accessed it via that viewChild, and then, further down, in the coding lifecycle hook here of our component, named in AfterViewInIt. We simply log it out. In fact, if we open up the devtools console, you can see here our templateRef being logged out.
[00:29] This is not really exciting. What we really want to arrive at is to take this one and pass it ahead to another component, which then uses it. Imagine we want to extend our ngx-tab here, that it doesn't render the static content which we provide here by the content projection mechanism. Rather, we want it to render our template, which we passed in.
[00:48] Let's take this out for a second here, jump into our tab component, which is responsible for rendering this part here. Of course, as a first step, we need to add here an input, which will be our template, which gets then passed from the outside by whoever is using us. Great.
[01:06] Next, we need obviously to adapt our template here, such that whenever our template property here is being passed in from the outside, we want to render that template. Otherwise, we want to use that ng-content projection section. As such, the first step can be to use an ngIf and, out here, a not template. Whenever it's not present, it will get hidden. Otherwise, it is being shown.
[01:30] For rendering an external template, we need a new tag, which is the so-called ng-container. A container allows us to basically use its property, which is called ngTemplateOutlet, and assign it a template, which gets passed in as a reference from the outside.
[01:47] As you can see here in the console log, which we have printed out before, this is a so-called instance of a templateRef, and that's something we can then pass on to that ngTemplateOutlet of the ng-container, and then it's being rendered. Obviously, we also need to adjust here the logic a bit. Let's say it only renders whenever the ng-template is actually defined.
[02:07] Now our ngx-tab component is ready to accept such a template from the outside. Now we need to go back to our app-component and we actually need to reference it. That's quite easy. We can simply use our new template input property, which we have defined, and then we use that personAdded variable here and pass it in.
[02:25] Once our browser refreshes, we can then jump in here. Open tab two, and you can see here we get the content which we have actually defined in our ng-template below here.