Set focus to element of nested component in Angular 4

Question

In angular 4, I have a component nested inside of another. The inner or the child component contains: a button, an input and a drop down list.
On the parent page, when I click on the button, both the input and the drop-down are displayed.

What is a good way to set focus of the input when clicking the button?

What I tried so far:
In the child component, I added an id on the input: <input #inputId ... >, then in the same method triggered when the button is pressed, in the child component, I added:

$('#inputId').focus();

But this has no effect...
Any suggestions?

kshetline · Accepted Answer · 2018-03-19 00:29:20Z

2

The notation #inputId isn't something you can search for using a jQuery selector. What that notation gives you is something you can access from the parent component with a declaration like this:

  @ViewChild('inputId') myInput: ElementRef;

Once you have this element reference, then you'd grab focus with:

(myInput.nativeElement as HTMLInputElement).focus();

In some situations, you might need:

setTimeout(() => {
  (myInput.nativeElement as HTMLInputElement).focus();
});

edited Mar 19, 2018 at 0:29

answered Mar 19, 2018 at 0:16

kshetline

14k6 gold badges49 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

annepic Over a year ago

Thank you kshetline, I added the grab focus part in the child component, no effect yet (it's in the method triggered when I click the button). should I have placed it in the parent instead?

kshetline Over a year ago

It's kind of hard to comment without seeing more of the code. The @ViewChild declaration has to be in whatever code has #inputId declared in its template. If myInput is defined, then you've got it in the right place. Then your event handler should be in the same class too, in order to see myInput. Were you getting any console errors, or just no result at all?

kshetline Over a year ago

I added above the suggestion that you might want to use setTimeout before requesting focus.

annepic Over a year ago

Wow. It worked with the setTimeout!! But why? I would never have figured it out. Thank you kshetline!

kshetline Over a year ago

Your event handler might not be the only event handler responding to the click event. Another event handler for that click might in fact request focus for the element that was clicked on, and if it does that after your focus request on the input field, the last such request will get priority. Using setTimeout ensures that the focus request for the input field happens last.

|

Collectives™ on Stack Overflow

Set focus to element of nested component in Angular 4

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related