Quick Notes: Using ng-template with ng-container

ng-template element does not display it's content to the browser. Instead, you can use ng-container and pass it the template to use. ng-container in turn, renders the template.

Here is an example of ng-container displaying the greeting ng-template:

<ng-template #greeting>
  Hello World
</ng-template>

<ng-container [ngTemplateOutlet]="greeting"></ng-container>

The input [ngTemplateOutlet] refers to the variable pointing to the template to be used.

One of the benefits of ng-template is that it allows us to define variables that it can display. There are two types of variables that can be passed - $implicit and an explicit one. Below is an example that passes both:

<ng-template #greeting let-name let-country="birthPlace">
  {{name}} lives in {{county}}
</ng-template>

<ng-container [ngTemplateOutlet]="greeting" [ngTemplateOutletContext]="data"></ng-container>

Notice that ng-template has two let-* properties:

let-name : We don't assign any value to this attribute, and as such, it is considered an implicit variable. Implicit variables pick their values from the context object when the object has a key $implicit. You can have many implicit variables (such as let-a let-b, etc), and they will all pick up the same $implicit variable value.
let-country="birthPlace" : This property sets the variable country to point to the birthPlace key within the context.

ng-container has another property passed to it - the context object, through the input property named ngTemplateOutletContext.

Here is the typescript file with the context object named data:

  data = {
    $implicit: 'Mark',
    birthPlace: 'Canada'
  }

Remember, if you don't assign a value to the let-* property, it will pick up value from $implicit within your context. Context must be an object, otherwise nothing will be displayed (empty value on the template).

Quick Notes: Using ng-template with ng-container

Comments

Angular

Quick Notes: Use enums instead of string comparisons for *ngIf

More from this blog

How to calculate simple and composite service SLAs availability.

GraphQL in .NET Core - Part 2

GraphQL in .NET Core - Part 1

How to create an RxJS Observable - manually and by use of Creation Operators

Create an Angular custom input component with grouping

Command Palette

Comments

Angular

Quick Notes: Use enums instead of string comparisons for *ngIf

More from this blog