33

Is there a way I can pass variables to templates in Angular2?

Let's say I have the following code:

<div *ngFor="foo in foos">
    <ng-container *ngTemplateOutlet="inner"</ng-container>
</div>

---------------

<ng-template #inner>
    {{ foo.name }}
</ng-template>

How can I get the template to print the name of foo?

alexandernst
  • 14,352
  • 22
  • 97
  • 197

5 Answers5

55

You should do like this: 

<div *ngFor="foo in foos">
   <ng-container *ngTemplateOutlet="inner; context:foo"></ng-container>
</div>

<ng-template #inner let-name="name">
   {{ name }}
</ng-template>
Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122
Tommy Thong Nguyen
  • 574
  • 5
  • 3
  • 5
    But this doesn't work if the template is located in another component. How do you pass a context object in such scenario? – Dynamic Oct 03 '18 at 09:37
26

in my case I needed the object to remain intact because I had some kind of recursion, this worked

<div *ngFor="foo in foos">
   <ng-container *ngTemplateOutlet="inner; context: {foo : foo}"></ng-container>
</div>

<ng-template #inner let-foo="foo">
   {{ foo.attributexy }}
</ng-template>
Kisinga
  • 1,640
  • 18
  • 27
  • 2
    For me this answer worked instead of the accepted one. I am working with Angular 8, maybe this is the reason. – Gabor Jan 14 '22 at 23:04
7

But this doesn't work if the template is located in another component. How do you pass a context object in such scenario?

I added
@Input() itemTemplate: TemplateRef<any>;

in component where I will use it, and in template of this component I write something like this: 

  <ng-container *ngTemplateOutlet="itemTemplate; context: item"></ng-container>

Code of template from outside component: 

<ng-template #dataRendererTpl let-data="data">
<div class="data">Hello, {{data.name}}</div>

Just pass link to dataRendererTpl as @Input() property to component in which you need it

Alex Voloshyn
  • 166
  • 1
  • 4
3

In the case you want to send the whole iterable object to the template, you can pass the array into the context as follow:

<ng-container *ngTemplateOutlet="inner; context:foos"></ng-container>

<ng-template #inner let-foos="values()">
   <div *ngFor="foo in foos">
      {{ foo.name }}
   </div>
</ng-template>
Flavien Volken
  • 19,196
  • 12
  • 100
  • 133
0

Let's make use of the $implicit key in the context object of ngTemplateOutletContext or ngTemplateOutlet, as it will set its value as default.

<div *ngFor="let foo of foos">
   <ng-container *ngTemplateOutlet="inner; context: { $implicit: foo}"></ng-container>
</div>

<ng-template #inner let-foo>
   {{ foo.name}}
</ng-template>
  1. This will help us in accessing the whole object ie Multiple parameters inside the template.
  2. Then, there is no dependency that let-foo should match the context object default value variable name (foo). It can be any variable.
    <ng-template #inner let-user>
        {{ user.name}}
    </ng-template>

I'm Assuming, ng-template and div with ng-container are in same component.

If the template is in other component, make use of @input() decorator inside template component.ts

Deeraj Reddy
  • 26
  • 1
  • 5