Renderer2 error - id did not match any elements

user_7014356 0
Viewed 937

So I have an input field which I would like to focus on load in an Angular application. I read that the Renderer2 way is the good method of doing so, and it works if I call the function for example on click like so:

focusMyInput() {
    this.renderer.selectRootElement('#myInput').focus();
}

But if I try to make it focus on load, like this:

ngAfterViewInit() {
    this.renderer.selectRootElement('#myInput').focus();
}

It throws an error:

 The selector "#myInput" did not match any elements
    at DefaultDomRenderer2.selectRootElement

HTML:

<input id="myInput" />

Any idea what could be the reason behind this?

angular-renderer2 angular8 angular typescript javascript
2 Answers

Please try this workig demo

 @ViewChild('myInput') myInput: ElementRef;//if it is direct child or element
 @ContentChild('myInput') myInput: ElementRef;// if it is inside ng-content html
    
ngAfterViewInit() {
this.renderer.selectRootElement(this.myInput.nativeElement).focus();
}

or

 ngAfterContentInit() {
this.renderer.selectRootElement(this.myInput.nativeElement).focus();
    }

in Html you have to do like

<input id="myInput" #myInput />
user_37425020

You could try with:

ngOnInit() {
    setTimeout(() => this.renderer.selectRootElement('#myInput').focus());
}

More details on this article.

It seems there is a long long discussion about having an event after the render. This solution could be helpful or (really ugly) set a 100ms timeout in my previous proposed solution.

Hope this helps.

user_46909460
Related