How is the following keyword used in angular2 ng-templates
- What is the purpose of
$implicitin angular 2 templates? - What is relationship between
let-<attribute>and$implicit?
How is the following keyword used in angular2 ng-templates
$implicit in angular 2 templates? let-<attribute> and $implicit?For multiple variables, you should do something like below, A template would be:
<ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{$implicit: 'Hello', key2: 'value2', key3: 'value3'}"> </ng-template>
then
<ng-template #template let-default let-key2="key2" let-key3="key3">
{{default}}
{{key2}}
{{key3}}
</ng-template>
so, output will be,
default = Hello
key2 = value2
key3 = value3
If you have to pass only a variable to the template from the container where we are referencing it, we could use
<ng-container *ngTemplateOutlet="deleteClient;context: firstName">
</ng-container>
And use it like this.
<ng-template #deleteClient let-client="firstName">
Are you sure? Want to remove {{ client }} !
</ng-template>
Where as If you have to pass the object it self to the template, we could use
<ng-container *ngTemplateOutlet="deleteClient;context: { $implicit: client }">
</ng-container>
And use it like this.
<ng-template #deleteClient let-client>
Are you sure? Want to remove {{ client.firstName }} {{ client.lastName }}!
</ng-template>
I have used $implicit to pass value to ng-template, dynamically creating an anchor tag for the title. $implicit is used to pass data to ng-template
<ng-container [ngTemplateOutlet]=" col.bodyTemplate"
[ngTemplateOutletContext]="{$implicit: product}">
</ng-container>
<ng-template #productTitle let-product> // let-product-> declaring local variable
<a [routerLink]="['/products', product.Id]" [queryParams]="{searchText:searchText}">
{{product.Title}}</a>
</ng-template>