I want to pass something like ng-content to ngFor inside my component. But the fact is that I need to transfer the repeated element to the element that is transcanded. Found something similar for the first angulyar: http://plnkr.co/edit/aZKFqPJmPlfTVRffB0Cc?p=preview .

And how to do it on the second?

PS: This question is in English.

1 answer 1

To do this, use ngForTemplate :

https://plnkr.co/edit/mpuQse2QuyP7QHXL7wM1?p=preview

 @Component({ selector: 'foo', template: ` <h1>I am foo</h1> <div> <template ngFor [ngForOf]="data" [ngForTemplate]="itemTemplate"></template> </div> ` }) export class Foo { @Input() data: any[]; @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>; } @Component({ selector: 'my-app', template: `<h1>Angular 2 Systemjs start</h1> <foo [data]="items"> <template let-item> <div>item: {{item}}</div> </template> </foo> `, directives: [Foo], }) export class AppComponent { items = [1, 2, 3, 4]; }

The template tag can be replaced by the attribute:

https://plnkr.co/edit/jB4qzx9Zd3JLkyenu9f3?p=preview

 <foo [data]="items"> <div template="let item">item: {{item}}</div> </foo>

What scoup does the spilled content have?

The scop of the transmitting component is fully accessible to it, in which the variable specified in the let is added. If that variable already had that variable, it is overridden. The repeater component skipup pattern is not available.

http://plnkr.co/edit/VzT9koNXzAx3B1qvHuJ8?p=preview

PS: This is an updated translation of the response from yurzui .