Inline Templates With Ngtemplateoutlet
Jun 5th, 2020 - written by Kimserey with .
Angular has some nice directives hidden in the code that aren’t discussed in the guides. One of them is NgTemplateOutlet which allows us to create inline reusable templates. In today’s post we will look at how we can use NgTemplateOutlet to share functionalities in a HTML template.
If you aren’t familiar with structural directives, you can refer to my previous deep dive into NgIf where I explain how to build a structural directive and the Angular microsyntax.
NgTemplateOutlet Usages
NgTemplateOutlet is a structural directive allowing us to insert an embedded view from a given TemplateRef associated with an option context.
It has two properties ngTemplateOutlet: TemplateRef<any> and ngTemplateOutletContext: Object | null which are used in the background to intantiate the embedded view,
1
viewContainerRef.createEmbeddedView(templateRef, context);
where the viewContainerRef is the container in which NgTemplateOutlet is specified, templateRef is the ngTemplateOutlet argument and context is the ngTemplateOutletContext argument.
Since NgTemplateOutlet is a structural directive, we are able to use it with the asterisk *ngTemplateOutlet and specify the template reference.
1
<ng-container *ngTemplateOutlet="myTemp"></ng-container>
myTemp is a reference to a local template. A template is created using ng-template and the reference is defined using a hash #myTemp.
1
<ng-template #myTemp>Hello</ng-template>
NgTemplate is a special component that will never be inserted into the DOM hence never displayed. It is used for other directive to reference and instantiate just like how we do with NgTemplateOutlet.
With NgTemplateOutlet we are able to create templates within our component template and reference them directly within the same component template. In other words, we are able to create <ng-template #myTemp></ng-template> parts which we define anywhere in our template and use <ng-container *ngTemplateOutlet="myTemp"></ng-container> to insert the template anywhere.
Reuse Templates
The first benefit that NgTemplateOutlet provides is the ability to create reusable inline templates. For example, if we had a template showing multiple titles:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<h5 class="some-special-style">My title</h5>
<small>Some text</small>
</div>
<p>Some Text</p>
<div>
<h5 class="some-special-style">My second title</h5>
<small>Some text</small>
</div>
<p>Some Text</p>
<div>
<h5 class="some-special-style">My third title</h5>
<small>Some text</small>
</div>
<p>Some Text</p>
This is a typical example of a HTML page with different sections displaying different information but with similar formatting. We could create a component appTitle, in a title.component.ts which would contain the following:
1
2
3
4
<div>
<h5 class="some-special-style">My third title</h5>
<small>Some text</small>
</div>
with two inputs, title and message and no logic in the component. But that would be an extra file which would be overkill for a shared template only used within a single template. Instead, we can use NgTemplateOulet to create a reusable inline template.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ng-container *ngTemplateOutlet="title; context: { $implicit: 'My title', message: 'Some text' }"></ng-container>
<p>Some Text</p>
<ng-container *ngTemplateOutlet="title; context: { $implicit: 'My second title', message: 'Some text' }"></ng-container>
<p>Some Text</p>
<ng-container *ngTemplateOutlet="title; context: { $implicit: 'My third title', message: 'Some text' }"></ng-container>
<p>Some Text</p>
<ng-template #title let-title let-message="message">
<div>
<h5 class="some-special-style"></h5>
<small></small>
</div>
</ng-template>
We used let-* notation to extract value from the context and make them available in the template. By using NgTemplateOutlet we were able to create a shared template localised to our template.
And that concludes today’s post!
Conclusion
Today we saw one of Angular built-in directives NgTemplateOutlet which allow us to instantiate a template within another template. We saw how to use it and the different properties it has. And we completed the post by looking at how we could make use of it to create a shared template localised to a component template, saving the cost of creating an extra component. Hope you like this post and I see you on the next one!