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.
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();
}
Also you can use selectRootElement method of Renderer2.
For example:
constructor(private renderer: Renderer2) {}
this.renderer.selectRootElement('#domElementId').focus()
, where domElementId is id='domElementId' in your html
template reference variable :#inlineEditControl
<input #inlineEditControl class="form-control form-control-lg" [placeholder]="label">
@ViewChild('inlineEditControl') inlineEditControl: ElementRef; // input DOM element
this.inlineEditControl.nativeElement.focus();