What is $implicit in angular 2?
You can define local variable on ng-template
through let-name
When angular creates template by calling createEmbeddedView
it can also pass context that will be used inside ng-template
Using the key $implicit
in the context object will set it's value as default. So if we write:
vcRef.createEmbeddedView(template, { $implicit: 'value' })
and we have template
<ng-template let-foo> {{ foo }}</ng-template>
then we can think about it like
<ng-template let-foo="$implicit"> {{ foo }}</ng-template>
so foo
will equal value
On the other hand if we have context like:
{ bar: 'value' }
we have to declare variable like:
let-foo="bar"
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 = Hellokey2 = value2key3 = 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>