Declares a reference to a single child element.

The ViewChild 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 implements AfterViewInit {
  @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 implements AfterViewInit {
  @ViewChild('child')
  ChildCmp child;

  @override
  ngAfterViewInit() {
    // child is set
    child.doSomething();
  }
}
Inheritance
  • Object
  • ViewChild

Constructors

ViewChild(Object selector, { Object read })
const

Properties

descendants → bool
Whether to query only direct children (false) or all children (true).
final, inherited
first → bool
Whether to only query the first child.
final, inherited
hashCode → int
The hash code for this object. [...]
read-only, inherited
read → Object
The DI token to read from an element that matches the selector.
final, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited
selector → Object
Either the class Type or selector String.
final, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

operator ==(other) → bool
The equality operator. [...]
inherited