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