Reputation: 1169
Code:
@Component({selector: 'item1', template: 'item1'})
export class Item1Component {}
@Component({selector: 'item2', template: 'item2'})
export class Item2Component {}
@Component({selector: 'item-group', template: `
<ng-content></ng-content>
`})
export class ItemGroupComponent {
@ContentChildren(Item1Component)// <-- ?
private items: QueryList<Item1Component>;
ngAfterContentInit() {
console.log('items', this.items);
}
}
//---------------------------------
<item-group>
<item1></item1>
<item2></item2>
</item-group>
Plunker https://plnkr.co/edit/jxoxWuuX0MAGym2irg0V?p=preview
Question: I can select Item1Component or Item2Component with @ContentChildren but how can i select both of types Item1Component and Item2Component in one QueryList?
Upvotes: 2
Views: 2894
Reputation: 658263
AFAIK this is not supported if you pass the type of the component as argument. You can pass multiple template variable names though
@ContentChildren('item1,item2,item3')
or alternatively you can use the same template variable for all items and query them like
@ContentChildren('item')
Upvotes: 2
Reputation: 202346
The only thing you can do here is adding an identifier to each sub elements in your input content:
<item-group>
<item1 #i1></item1>
<item2 #i2></item2>
</item-group>
and reference them by id into your @ContentChildren
:
@ContentChildren('i1,i2')
private items: QueryList<any>;
In this case, you will have the two elements in your query list.
See this plunkr: https://plnkr.co/edit/zVurr55KI9kwoJPwGzDw?p=preview.
Upvotes: 4