Angular 2/4 set focus on input element

Question

How can I set focus on an input by (click) event? I have this function in place but I'm clearly missing something (angular newbie here)

sTbState: string = 'invisible';
private element: ElementRef;
toggleSt() {
  this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
  if (this.sTbState === 'visible') {
    (this.element.nativeElement).find('#mobileSearch').focus();
  }
}

Answer 1

You can use the @ViewChild decorator for this. Documentation is at https://angular.io/api/core/ViewChild.

Here's a working plnkr: http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

This gist of the code comes down to, giving a name to your input element and wiring up a click event in your template.

 <input #myInput />
 <button (click)="focusInput()">Click</button>

In your component, implement @ViewChild or @ViewChildren to search for the element(s), then implement the click handler to perform the function you need.

export class App implements AfterViewInit {
  @ViewChild("myInput") inputEl: ElementRef;

  focusInput() {
    this.inputEl.nativeElement.focus()
  }

Now, click on the button and then the blinking caret will appear inside the input field. Use of ElementRef is not recommended as a security risk, like XSS attacks (https://angular.io/api/core/ElementRef) and because it results in less-portable components.

Also beware that, the inputEl variable will be first available, when ngAfterViewInit event fires.

Answer 2

Get input element as native elements in ts file.

//HTML CODE

<input #focusTrg />
<button (click)="onSetFocus()">Set Focus</button>

//TS CODE
@ViewChild("focusTrg") trgFocusEl: ElementRef;

  onSetFocus() {
     setTimeout(()=>{
      this.trgFocusEl.nativeElement.focus();
    },100);
  }

we need to put this.trgFocusEl.nativeElement.focus(); in setTimeout() then it'll work fine otherwise it will throw undefined error.