ViewChildren

Declares a reference to multiple child elements.

The list is automatically updated when the DOM is updated.

The ViewChildren annotation takes an argument that specifies the elements to be selected.

• If the argument is a Type, directives or components with the type will be bound.

• If the argument is a String, the string is interpreted as a list of comma-separated selectors. For each selector, an element containing the matching template variable (e.g. #child) will be bound.

View children are set before the ngAfterViewInit callback is called.

Example

With type selector:

@Component(
  selector: 'child-cmp',
  template: '<p>child</p>'
)
class ChildCmp {
  doSomething() {}
}
 
@Component(
  selector: 'some-cmp',
  template: '''
    <child-cmp></child-cmp>
    <child-cmp></child-cmp>
    <child-cmp></child-cmp>
  ''',
  directives: const [ChildCmp]
)
class SomeCmp {
  @ViewChildren(ChildCmp)
  QueryList<ChildCmp> children;
 
 @override
  ngAfterViewInit() {
    // children are set
    for ( var child in children ) {
      child.doSomething();
    }
  }
}

With string selector:

@Component(
  selector: 'child-cmp',
  template: '<p>child</p>')
class ChildCmp {
  doSomething() {}
}
 
@Component(
  selector: 'some-cmp',
  template: '''
    <child-cmp #child1></child-cmp>
    <child-cmp #child2></child-cmp>
    <child-cmp #child3></child-cmp>
  ''',
  directives: const [ChildCmp])
class SomeCmp {
  @ViewChildren('child1, child2, child3')
  QueryList<ChildCmp> children;
 
  @override
  ngAfterViewInit() {
    // children are set
    for ( var child in children ) {
      child.doSomething();
    }
  }
}