Question

73

How to focus on a field?

rated 0 times [ 77] [ 4] / answers: 1 / hits: 32516 / 7 Years ago, fri, march 24, 2017, 12:00:00

I updated from Angular 2 to Angular 4 and in the docs it's written to use the Renderer2 instead of Renderer which is deprecated.

Now am looking into the Renderer source, but cannot find a way to invoke the focus() method as I used to.

Old method:

this.renderer.invokeElementMethod(element, 'focus', []);

What is the new aproach?

EDIT

What if the element i am focusing onto is obtained via QuerySelector?

For instance:

let inputField = document.querySelectorAll('.dialog input');

if ( inputField[0] ) {

   inputField[0].focus();

}

Since its obtained via QuerySelector, the focus() method doesn't exist on it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 7 Years ago saulthomasb · Accepted Answer

The invokeElementMethod is deprecated, and will not find its way back into the new renderer. To set focus to an element, you can simply use this now:

element.nativeElement.focus();

If you are using document.querySelectorAll, you are doing something not the angular way, and you should find another way to do it. If there is no other way to do it, then the same principle applies. The focus() method is plain javascript, so you can use it within angular2/typescript. Be sure to do the querySelectorAll inside the ngAfterViewInit hook of the component though:

ngAfterViewInit() {

   let inputField: HTMLElement = <HTMLElement>document.querySelectorAll('.dialog input')[0];

   inputField && inputField.focus();

}