Angular 2 onload event for a native DOM element

Issue

My ultimate goal is to make a textarea element autofocus on creating. I have just thought of a solution to call e.target.focus() on event onload. Something like:

<textarea rows="8" col="60" (load)='handleLoad($event)'>

and then:

handleLoad(e){
  e.target.focus();
}

The problem is angular does not recognize load event.

PS: I tried autofocus once but it seems not working.

Solution

You should be able to do it in ngAfterViewInit hook:

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core'

// ...

export class Component implements AfterViewInit {

  @ViewChild('textarea') textarea: ElementRef

  ngAfterViewInit() {
    this.textarea.nativeElement.focus()
  }
}

Where in template you need to set template variable:

<textarea #textarea rows="8" col="60"></textarea>

Answered By – dfsq

Answer Checked By – Mildred Charles (AngularFixing Admin)