ViewChild

Declares a reference to a single child element.

The ViewChildren annotation takes an argument to select elements.

• If the argument is a Type, a directive or a component with the type will be bound.

• If the argument is a String, the string is interpreted as a selector. An element containing the matching template variable (e.g. #child) will be bound.

In either case, @ViewChild() assigns the first (looking from above) element if there are multiple matches.

View child is 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>',
  directives: const [ChildCmp]
)
class SomeCmp {
  @ViewChild(ChildCmp)
  ChildCmp child;
 
  @override
  ngAfterViewInit() {
    // child is set
    child.doSomething();
  }
}

With string selector:

@Component(
  selector: 'child-cmp',
  template: '<p>child</p>'
)
class ChildCmp {
  doSomething() {}
}
 
@Component(
  selector: 'some-cmp',
  template: '<child-cmp #child></child-cmp>',
  directives: const [ChildCmp]
)
class SomeCmp {
  @ViewChild('child')
  ChildCmp child;
 
  @override
  ngAfterViewInit() {
    // child is set
    child.doSomething();
  }
}