CODEWITHSUNDEEP
javascripthtmlangularfocus
mr__brainwash
mr__brainwash

Reputation: 1382

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

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?

Upvotes: 2

Views: 803

Answers (1)

JC Ford
JC Ford

Reputation: 7066

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

Upvotes: 2

Related Questions