NgTemplateOutlet and Template Context

Introduction

The NgTemplateOutlet is a directive in Angular which is used to create reusable components in Angular. 
  • We can take the template and instantiate it anywhere on the page using NgTemplateOutlet directive.
  • it is used as containers to templates. It gives us the ability to use a single template multiple times on a page without loops and conditions.
  • To make a highly customized and configured component, NgTemplateOutlet is used.
  • To inject a template dynamically on the page, NgTemplateOutlet is the major concept to learn.
  • It inserts an embedded view from an already existing TemplateRef.
  • We can add as many NgTemplateOutlet tags to the single page. We can use it to instantiate the number of templates as we like.
As we have already studied that we can create template references and passing it to ngIf as shown below:

<div ngif="condition; else elseBlock">
Template will render if the condition is true.</div>
<ng-template #elseBlock>This will render if the condition is false.</ng-template>
Scenario 1: Reuse Template Creation 
There is one other use-case for the ng-container directive. It acts as a placeholder to inject templates dynamically on the page with NgTemplateOutlet.
<ng-container *ngTemplateOutlet="templateRef"></ng-container>
We can see how ng-container helps us to instantiate as templateRef. We are referring to the templateRef template with template reference i.e. templateRefNgTemplateOutlet is used to instantiate the template. 

Reuse Template Example: Suppose we have the ng-template defined. We are using the same template reference "reuseTemplate" at different sections of the page. 

<ng-template #reuseTemplate>
   <div>.....</div>
   <label>....<label>
</ng-template>
We will reuse the same template to show on our page using ng-container and ngTemplateOutlet. We will define *ngTemplateOutlet="reuseTemplate" using ng-container as written below.
<div>
   <ng-container *ngTemplateOutlet="reuseTemplate"></ng-container>
</div>
<header>
   <ng-container *ngTemplateOutlet="reuseTemplate"></ng-container>
</header>
<footer>
   <ng-container *ngTemplateOutlet="reuseTemplate"></ng-container>
</footer>

Template Context

Scenario 2: Template Context
Template context means what we can see inside a template. Is template have its own variable with the defined scope or which variables have scope inside the template?
Inside the ng-template tag, we will have access to the same variables that are visible in the outer template. 

  • Every template has its own context object which contains all template specific variables.
  • We can see a context object to the EmbeddedViewRef by setting the [ngTemplateOutletContext].
  • [ngTemplateOutletContext] should be an object. The keys of this object can be accessed for binding the local template let declarations.
  • If we use the $implicit key in our context, then it will set the default value.
  • NgTemplateOutlet is a string defining template reference and the context object which is optional for the template.
@Component({
  selector: 'ng-template-outlet',
  template: `
    <ng-container *ngTemplateOutlet="templateRef"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="entryRef; context: myContext"></ng-container>
    <hr>
    <ng-container *ngTemplateOutlet="wishRef; context: myContext"></ng-container>
    <hr>
    
    <ng-template #templateRef><div>Hello</div></ng-template>
    <ng-template #entryRef let-entry><span>{{entry}}!</span></ng-template>
    <ng-template #wishRef let-wish="wishes"><span>{{wish}}</span></ng-template>
`
})
export class NgTemplateOutlet {
  myContext = {$implicit: 'Default Wish', wishes: 'Good Morning'};
}

In the example above we have important illustrations to understand which are as follows:

  • We have three templates which have their input variables defined with the let keyword. For the first template we don't have any variable defined, for the second we have entry, for the third we have wish.
  • This variable is defined via an ng-template property using keyword let.
  • These variables will have their scope inside ng-template not outside it.
  • The content of the variable will be determined by the expression that is assigned to the property entry and wish.
  • The expression is evaluated against the context object which is passed with the ngTemplateOutlet.
  • The context object we have in this example is myContext. It will have the property which is used as a variable in ng-template.


Comments