[Angular] @ViewChild and template #refs to get Element Ref

We can use @ViewChild with component:

@ViewChild(AuthMessageComponent) message: AuthMessageComponent;

//....

 ngAfterContentInit() {
    if (this.message) {
      this.message.days = 30;
    }
  }

By doing this, we actually can access component's prop and events.

 

If we want to get component DOM node, what we can do is using template ref.

<input type="email" name="email" ngModel #email>

@ViewChild('email') email: ElementRef;

// ....

  ngAfterViewInit() {
    console.log(this.email); // ElementRef
  }