[Angular] Learn How To Use ng-template Inputs

For example, we have a modal component, it can config that using ng-template as a configurable template.

<ng-template #auModalBody></ng-template>

<au-modal [body]="auModalBody" ></au-modal>

Now what we want to do is to pass in inputs to ng-templates so that template can change dynamiclly according to the inputs.

For example:

<ng-template #auModalBody
let-title="title"  <!-- define a title prop -->
let-tabActivated=loginTabActivated <!-- define a tabActivated prop -->
>
<!-- we can use 'title' & 'tabActivated' props here -->
<h2>{{title}}</h2>
<tab [selected]="tabActivated" #login />
<tab [selected]="!tabActivated" #signUp />
</ng-template>

<au-modal [body]="auModalBody" [context]="{
title: 'Login or Sign up',
tabActivated: loginTabActivated  <!-- based on those variables we passed in-->
}"></au-modal>

To do that, we need to add an @Input to au-modal component:

@Input() context: any;

<ng-container *ngIf="body; else projectionBody">
<ng-container *ngTemplateOutlet="body; context:context" ></ng-container>
</ng-container>

See the commit: Github