Angular 2 .focus() not working

Question

I want to open a modal window and that the input that is in it be focused.

in the html file

<img id='searchIcon' 
     src="images/search.png" 
     class="icon iconCenter" 
     data-toggle="modal" 
     data-target="#myModal" 
     (click)='focusSearch();' />

<div id="myModal" class="modal fade modal-container" role="dialog">
    <h3>SEARCH</h3>
    <input id='inputSearch' type="text" autofocus>
</div>

With the autofocus attribute I got focus the first time that I open the modal view, but after I close and open the modal again doesn't do anything.(in firefox doesn't work at all)

in the ts file

focusSearch(){
    document.getElementById("inputSearch").focus();
}

If someone can leave a quick demo I would appreciate it

A nice directive to make this easier http://stackoverflow.com/questions/34522306/angular-2-focus-on-newly-added-input-element Not sure you can use it for your use case. — Günter Zöchbauer, Aug 02 '16 at 14:29

null canvas · Answer 1 · 2016-08-03T10:17:13.660

1

Try this, without a function

<img id='searchIcon' src="images/search.png" class="icon iconCenter" data-toggle="modal" data-target="#myModal" (click)='myInput.focus()'>
    <div id="myModal" class="modal fade modal-container" role="dialog">
       <h3>SEARCH</h3>
       <input id='inputSearch' type="text" autofocus #myInput>
    </div>

edited Aug 03 '16 at 10:17

answered Aug 02 '16 at 14:21

null canvas

10,201
2
15
18

didn't work, says that the # in the click is an error – angel Aug 02 '16 at 16:59
it should work now, I have removed the `#`, `(click)='myInput.focus()'` – null canvas Aug 03 '16 at 10:17
don't know why, but in my case this method focuses the element which is next to the one intended – kyselm Jul 19 '19 at 09:43

score 1 · Answer 2 · edited Jun 23 '21 at 21:54

Set focus example

Html

   <button (click)="setFocus()">Set Focus</button>
    <input type="text" [(ngModel)]="term2" #inputBox>

Component

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

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent {

  @ViewChild("inputBox") _el: ElementRef;

  setFocus() {
    this._el.nativeElement.focus();
  }
}

You can modify the code according to your needs. Also you can set the focus just after the component has loaded. For example

 ngAfterViewInit() {
    this._el.nativeElement.focus();
  }

Angular 2 .focus() not working

2 Answers2