Set element focus using a directive

Question

I am trying to get an Angular Directive to control setting the focus on an element programmatically.

Here is what my directive looks like in the component html:

<input type="text" class="form-control"
    [(ngModel)]="inputText" [myFocus]="isFocused">

Here is what my directive looks like:

import { Directive, OnInit, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[myFocus]'
})
export class FocusDirective implements OnInit {

  @Input('myFocus') isFocused: boolean;

  constructor(private hostElement: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    if(this.isFocused) {   
      this.renderer.selectRootElement(this.hostElement.nativeElement).focus();
    }
  }
}

Then in the component code I changed this:

this.isFocused = true;

The directive is included in the app.module.ts like so:

import { FocusDirective } from './directives/focus.directive';

@NgModule({
  declarations: [
    FocusDirective
  ],
   bootstrap: [AppComponent]
})
export class AppModule { }

However the focus does not seem to get set when I do this. I understand there have been some fairly big changes to how the Renderer2 works, and I assume I am getting something wrong with my step of setting the focus in the ngOnInit() method.

Possible duplicate of [How to set focus on element with binding?](https://stackoverflow.com/questions/38307060/how-to-set-focus-on-element-with-binding) — Jota.Toledo, Nov 04 '18 at 13:39

Suresh Kumar Ariya · Accepted Answer · 2018-11-04T13:39:26.533

4

You can achieve using nativeElement.focus()

import { Directive, OnInit, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[myFocus]'
})
export class FocusDirective implements OnInit {

  @Input('myFocus') isFocused: boolean;

  constructor(private hostElement: ElementRef, private renderer: Renderer2) { }

  ngOnChanges() {
    if(this.isFocused) {   
      this.hostElement.nativeElement.focus();
    }
  }
}

edited Nov 04 '18 at 13:39

answered Nov 04 '18 at 13:28

Suresh Kumar Ariya

9,516
1
18
27

I should work. may ne you are doing something wrong. Refer https://stackoverflow.com/questions/38307060/how-to-set-focus-on-element-with-binding – Suresh Kumar Ariya Nov 04 '18 at 13:37
Try using ngOnChanges life cycle method. Updated the code – Suresh Kumar Ariya Nov 04 '18 at 13:39
@SureshKumarAriya so basically a copy-paste of an existing answer uh? – Jota.Toledo Nov 04 '18 at 13:45
No, i added the code based on feedback i validated and updated the code. – Suresh Kumar Ariya Nov 04 '18 at 14:50
Angular team doesn't encourage manipulating DOM directly. It's prone to XSS attacks. You should be using Renderer2 instead – Sharan Mohandas Jan 09 '20 at 09:33
should you use blur() when isFocused is false ? looks like it's working without it but I'm wondering how is it working without it – pdiddy Jan 26 '22 at 17:00

score 1 · Answer 2 · answered Feb 07 '23 at 10:33

Simplified version of @Suresh Kumar Ariya's answer without using change detection. This will focus only when the [myFocus]=value directive switch to true.

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[myFocus]',
})
export class FocusDirective {
  constructor(private hostElement: ElementRef) {}

  @Input()
  set myFocus(focus: boolean) {
    if (focus) {
      this.hostElement.nativeElement.focus();
    }
  }
}

Set element focus using a directive

2 Answers2