CODEWITHSUNDEEP
angular
IgorL
IgorL

Reputation: 1169

How to select more than 1 type with @ContentChildren in angular2

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

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

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

Thierry Templier
Thierry Templier

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

Related Questions