angular2 feeding data back to `<template>` from `[ngTemplateOutlet]`

Question

So I have a component with a <template>

<some-component [data]="someArray">
  <template>foo<template>
</some-component>

and it's using this to get hold of the template

@ContentChild(TemplateRef)
public tmpl: TemplateRef<any>;

which is then used in its template like this

<div *ngFor="let item of someArrayFromDataInput">
  <template [ngTemplateOutlet]="tmpl"></template>
</div>

now I would like to be able to print some data from item in the original template, basically to be able to do this

<some-component [data]="someArray">
  <template>foo {{ item }}<template>
</some-component>

is it possible somehow?

fxck fxck · Accepted Answer · 2016-06-06T16:21:06

Updated to match Angular 5+ api ngOutletContext was renamed to ngTemplateOutletContext as per https://stackoverflow.com/a/37654077/301596

Once this lands https://github.com/angular/angular/pull/9042 it will work like this

<div *ngFor="let item of someArrayFromDataInput">
  <template 
    [ngTemplateOutletContext]="{
      item: item
    }" 
    [ngTemplateOutlet]="tmpl"></template>
</div>

+

<some-component [data]="someArray">
  <template let-item="item">foo {{ item }}<template>
</some-component>

// edit: landed

angular2 feeding data back to `<template>` from `[ngTemplateOutlet]`

2 Answers