Use <ng-template>

Part 6 of Advanced Angular Component Patterns

Photo by Samuel Zeller on Unsplash

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

‹ 05 Handle Template Reference Variables with Directives
07 Use Content Directives ›

Render Props have been making waves in the React community recently, but the corresponding pattern in the Angular world hasn’t been getting nearly as much press. I’ve written before that TemplateRefs are Angular’s Render Props and I hope to give you a good simple example of that here.

Note: TemplateRef is the class name and <ng-template> is the html tag — they are both referencing the same thing. Odds are you’ll use <ng-template> more frequently in your own code, but it’s easier to find information online under the term TemplateRef since <ng-template> gives you a lot of results relating to the html5 <template> tag.

Our existing implementation using custom content directives works well if the component author knows in advance all the ways that the parent component will want to use the toggle, but what if the parent component needs to use the toggle state in ways we didn’t plan for?

Goal:

Provide the toggle state directly to the parent component and allow it to provide the view.

Implementation:

The <ng-template> component is a perfect fit for this use case.

1. Toggle Component

The <toggle> component gets a reference to the <ng-template> by searching for a ContentChild and then provides that template with the state that it needs to do the view rendering. The code looks like this:

<ng-container
  *ngTemplateOutlet="layoutTemplate; context: { on: this.on, toggle: this.toggle, fns: { toggle: this.toggle } }">
</ng-container>

Here <ng-container> is used as a placeholder to which you can attach the *ngTemplateOutlet directive, which does all the work. layoutTemplate is the name of the template that is being rendered and context is used to register all the state that the toggle component is providing to the layoutTemplate.

2. Parent Component

The state passed from the toggle component is explicitly declared by the parent component in the <ng-template> using the let attribute.

The let attribute is constructed like this: let-templatevar="inputvar" where templatevar is the name that is used to reference the value inside the <ng-template> and inputvar is the name of the variable provided by the <toggle> component to the template. This syntax allows the parent component to avoid name collisions, in case there is already an inputvar in the parent scope.

Outcome:

Postscript

Alert reader Z Ye pointed out that the @Input decorator on layoutTemplate is unnecessary in this example — which is true.

It does provide some flexibility though. The parent component now has the option to pass the template as a reference or as a child.

For example:

<toggle [layoutTemplate]="myTemplate"></toggle>
<ng-template #myTemplate></ng-template>

This isn’t particularly useful if you’re just going to define the template next to the <toggle> component, but there could be scenarios where the template is defined elsewhere in your app and you want to pass it down through multiple components or using a service.