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