How to focus deep nested input from root component in Angular 5?

Question

I have component in component in component. So in the root component i want to focus input in the deepest child when i am clicking somewhere in .grandparent-container.

As you can see in the example i could have multiple components on the page. So i need to focus only child input of the clicked component. Here is example.

I tried to create a [focus] directive, but it works only if i have one grandparent on the page, because directive can't to figure out what exactly input it should focus.

Select element by id is not the case also.

How can i achieve this?

JC Ford · Accepted Answer · 2018-04-12 16:18:04Z

2

You could build a simple focus messaging service using an Observable Subject. Clicked controller tells the service it has been clicked. Child controller subscribes and sets focus. Good use case for a component-scoped provider.

Here's a fork of your example. https://stackblitz.com/edit/angular-1nbbk8

edited Apr 12, 2018 at 16:18

answered Apr 12, 2018 at 16:08

JC Ford

7,0963 gold badges27 silver badges36 bronze badges

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

3 Comments

JC Ford Over a year ago

Just replaced the link with a slightly better version.

mr__brainwash Over a year ago

Great. Thank you a lot!

Eagle Over a year ago

Excellent solution, I've implemented it on my app. Thanks

Collectives™ on Stack Overflow

How to focus deep nested input from root component in Angular 5?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related