How to Use ngTemplateOutlet in Angular

ngTemplateOutlet is a directive. It instantiates a template dynamically using a template reference and context object as parameters. In this guide, we will learn how to use it in Angular. We will show you several ngTemplateOutlet examples to learn from.

What is ngTemplateOutlet?

ngTemplateOutlet is a structural directive. We use it to insert a template (created by ngTemplate) in various sections of our DOM. For example, you can define a few templates to display an item and use them display at several places in the View and also swap that template as per the user’s choice.

How to use ngTemplateOutlet

First let us see a very simple example of ngTemplateOutlet.

In the following code, we have a template defined using the ng-template. The Template reference variable holds the reference the template. (TemplateRef).

The template does not render itself. We must use a structural directive to render it. That is what ngTemplateOutlet does

We pass the Template Reference to the ngTemplateOutlet directive. It renders the template. Any inner content that ngTemplateOutlet encloses will not be rendered.

The following code does not render the div.

i.e because the angular converts the above into the following ng-template syntax. The ngTemplateOutlet replaces everything inside the ng-template element and renders the template pointed by template1

The above use case is a simple one. You can achieve the same using a ngIf or ngSwitch directives. You can also make use of content projection using the ngContent.

Passing data to ngTemplateOutlet

We can also pass data to the using its second property ngTemplateOutletContext.

The following code creates a template. We name it as messageTemplate. The let-value creates a local variable with the name value

We can pass any value to the value using the ngTemplateOutletContextproperty

Alternatively you can also use the following syntax.

Pass more than one value.

Pass an object.

Using $implicit

If you use the key $implicit in the context object will set its value as default for all the local variables.

For Example we have not assigned anything to the let-name so it will take the value from the $implicit, which is Guest.

And in the following code, both name & message gets the value from the $implicit i.e Guest

Passing Template to a Child Component

We can pass the entire template to a child component from the parent component. The technique is similar to passing data from parent to child component.

Create a parent component. Add a ng-template and name it as #parentTemplate.

Pass the parentTemplate to the child component using the property binding. ( <child [customTemplate] = "parentTemplate" > </child> )

In the Child, component receive the parentTemplate using the @Input(). And then pass it to ngTemplateOutlet.

Using ViewChild to Access the template

Use the ViewChild to get the access to the parentTemplate in the component.

Content Projection and ngTemplate

The content projection and ngTemplate can be used together.

The following is the Parent component, which uses the content projection to pass a template to the child.

In the child, we add it into a ngTemplate.

ngTemplateOutlet Example

The application we are going to build will display items either in card or list format.

Create a new application. Open the app.component.html

First, we ask the user Display Mode. He has to choose from the card & list using the select option dropdown.

Next, create a template for the card display. Name it as cardTemplate. The template takes items as input. Loop items collection using the ngFor to display the item header and content in the card format.

The listTemplate uses the ul to display the items in list format.

We finally pass the items to the item-view component. We also pass the template to it.

Now open the app.component.ts

First, get the reference to both the template using the ViewChild.

Define items , mode & modeOptions

the template returns either listTemplate or cardTemplate depending on the value of mode.

The ItemViewComponent recives the items to display and itemTemplate to use from the parent component.

Pass the itemTemplate to the ngTemplateOutlet to display the item. Use the ngTemplateOutletContext to pass the items collection.

Complete Source code

app.component.ts

app.component.html

item-view.component.ts

app.module.ts

Reference

  1. ngTemplateOutlet API

10 thoughts on “How to Use ngTemplateOutlet in Angular”

  1. This code

    is not legal html and gives errors in Angular. The ‘child’ element does not exist. I am unable to go further.

    My goal is to make a component whose template is a library of html snippets that I can reuse throughout my project in all other component templates.

  2. In Using ViewChild to Access the template
    @ViewChild(‘parentTemplate’,null) myTemplate:TemplateRef;
    should be
    @ViewChild(‘customTemplate’,null) myTemplate:TemplateRef;
    ?

  3. Charles Robertson

    This is one the best tutorials on NgTemplateOutlet. I have been an Angular Dev for over 7 years and I have always avoided, using content projection with NgTemplateOutlet.
    I think I will have a go, now 🙂

  4. Such a wonderful and article. Many useless authors on internet made this concept so hard to understand but you article was an eyeopener.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top