ng template - What is $implicit in angular 2?

Question

How is the following keyword used in angular2 ng-templates

• What is the purpose of $implicit in angular 2 templates?
• What is relationship between let-<attribute> and $implicit?

Answer 1

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

Plunker Example

On the other hand if we have context like:

{ bar: 'value' }

we have to declare variable like:

let-foo="bar"