What is ViewChild in Angular2?

Question

From the official documentation. A ViewChild:

Configures a view query.

View queries are set before the ngAfterViewInit callback is called.

The explanation is very minimal and I still don't quite understand what is it used for.

Consider this example from a blog I found.

Taking away the @ViewChild(TodoInputCmp) have no effect on the code inside TodoInputCmp

Can someone give me some insight?

Thanks

Answer 1

It provides a reference to elements or components in your view:

@Component({
  ...
  directives: [SomeComponent],
  template: `
  <div><span #myVar>xxx</span><div>
  <some-comp></some-comp>`
})
class MyComponent {
  @ViewChild('myVar') myVar:ElementRef;
  @ViewChild(SomeComponent) someComponent:SomeComponent;
  
  ngAfterViewInit() {
    console.log(this.myVar.nativeElement.innerHTML);
    console.log(this.someComponent);
  }
}

IMPORTANT: The variables are not initialized before ngAfterViewInit()

Answer 2

The ViewChild decorator is used to gain access to a child component, found in the template, so that you can access its properties and methods.