Finally I splitted the component into two:
@Component({
selector: 'ui-foo',
template: `
<ng-content></ng-content>
`
})
export class UiFoo {};
@Component({
selector: 'ui-foo-element',
template: `
<ng-content></ng-content>
<ui-bar></ui-bar>
`
})
Which when used like:
<ui-foo>
<ui-foo-element> <div class="a">A</div> </ui-foo-element>
<ui-foo-element> <div class="b">B</div> </ui-foo-element>
</ui-foo>
It's not optimal, but it works with ngfor
----
On Wednesday, February 17, 2016 at 3:27:01 PM UTC+1, Günter Zöchbauer wrote:
>
> No easy way. You can have a look at the `ngFor` implementation and
> `TemplateRef`
>
> On Friday, December 18, 2015 at 10:06:00 PM UTC+1, Corsen wrote:
>>
>> I can create a component like this pretty easily.
>>
>> @Component({
>> selector: 'ui-foo',
>> template: `
>> <ng-content select=".a"></ng-content>
>> <ui-bar></ui-bar>
>> <ng-content select=".b"></ng-content>
>> `
>> })
>> export class UiFoo {};
>>
>> Which when used like:
>>
>>
>> <ui-foo>
>> <div class="a">A</div>
>> <div class="b">B</div>
>> </ui-foo>
>>
>> Results in:
>>
>> <ui-foo>
>> <div class="a">A</div>
>> <ui-bar></ui-bar>
>> <div class="b">B</div>
>> </ui-foo>
>>
>> This is pretty cool, but what I'd really like to do is have a user
>> provide content like:
>>
>>
>> <ui-foo>
>> <div class="a">A</div> <!-- maybe with *ngFor -->
>> <div class="a">A</div>
>> <div class="a">A</div>
>> <div class="a">A</div>
>> <!-- any amount -->
>> </ui-foo>
>>
>> I'd like that to result in the following:
>>
>> <ui-foo>
>> <div class="a">A</div>
>> <ui-bar></ui-bar>
>> <div class="a">A</div>
>> <ui-bar></ui-bar>
>> <div class="a">A</div>
>> <ui-bar></ui-bar>
>> <div class="a">A</div>
>> </ui-foo>
>>
>>
>> Is this or something similar possible in Angular 2? I used intersperse
>> as an example, but generally how can I create content between user provided
>> elements through a single ng-content?
>>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
