74

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?
Phonolog
  • 6,321
  • 3
  • 36
  • 64
Mantu Nigam
  • 3,690
  • 7
  • 24
  • 41

4 Answers4

102

You can define local variables on ng-template through let-name

When angular creates a 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 its value as default. So if we write:

vcRef.createEmbeddedView(template, { $implicit: 'value' })

and we have the 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 a context like:

{ bar: 'value' }

we have to declare variables like:

let-foo="bar"
yurzui
  • 205,937
  • 32
  • 433
  • 399
21

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
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Vikash Choudhary
  • 1,439
  • 12
  • 9
6

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>
4

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>