80

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?

4 Answers 4

111

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"
4
  • 2
    Is there any way to declare multiple variables and use them? Commented Jul 12, 2017 at 11:07
  • Thanks, @yurzui very good explanation clear my all the doubts :) Commented Jul 12, 2017 at 11:13
  • Thank you very mutch to explanation, it is perfect, very good. Commented Aug 26, 2021 at 21:33
  • @MantuNigam Since that value is implicit, you can't have two of them, as the names would collide. I had the need for it, though, and resolved my have a single implicit field but assignment an object to it: {$implicit:{donkey:"apple",monkey:"banana"},...}. Didn't find a smoother way, regrettably. Commented Apr 14 at 10:53
23

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
1
  • I've just always disliked this $implicit structure. It's kind of unnatural and ambiguous. I get that they want to keep things convenient but the idea of "if you define any let-var on your template declaration and leave it blank, it will be given the $implicit value" is not explained well in the documentation. Maybe I have a problem with the documentation...
    – dudewad
    Commented Dec 30, 2023 at 1:59
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.