Angular 4: Viewchild set focus

Question

I'm trying to control the button focus without using the tag autofocus=true, but it seems that doesn't work properly, do you think is necessary a pipe?

 <button #btn_focus>

 @ViewChild('btn_focus') firstNameElement: ElementRef;

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

Thanks.

Answer 1

I also have the same problem tried multiple ways but not worked. finally, I used javascript code to focus on given HTML element with attribute id.

function focusInputelement(id) {
        window.setTimeout(() => {
              document.getElementById(id).focus();
        }, 500);
    }

Answer 2

Your code is working, you can see it in action here:

https://stackblitz.com/edit/angular-6mszhb?file=app%2Fapp.component.ts

I bet your problem is just opened developer console, that steals the focus right after page is loaded. Try to open that stackblitz with developer console closed (works), than open the console (and have it focused, so your cursor is blinking there) and refresh the page (will not work).