*ngIf with focus directive

Question

In my app, I tried to place a button that shows/hides an input field with a boolean component property. If the button shows the input, focus should be set on the input. But it seems not to work. If I remove the *ngIf the focus directive works fine.

I created a plunker that shows what I mean. It's kind of difficult to describe my problem.

HTML in a component:

<input *ngIf="filterShow.options"
       [focus]="filterFocus.options"
       [(ngModel)]="filter.options">

<button type="button"
        (click)="setShowFilter('options')">
  focus
</button>

setShowFilter() method:

private setShowFilter(filter: string) {
  this.filterShow[filter] = !this.filterShow[filter];

  /* reset filter */
  this.filter[filter] = "";

  this.filterFocus[filter].emit(true);
}

focus.directive.ts:

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

  @Input('focus') focusEvent: EventEmitter<boolean>;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnInit() {
    this.focusEvent.subscribe(event => {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    });
  }
}

score 9 · Accepted Answer · edited Jul 02 '19 at 19:01

9

EventEmitters are for @Outputs, not for @Inputs. Try something like this instead:

@Directive({
  selector: '[focus]'
})
export class FocusDirective implements OnChanges {

  @Input('focus') focus: boolean;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnChanges() {
    if (this.focus) {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    }
  }
}

edited Jul 02 '19 at 19:01

Alexander Abakumov

13,617
16
88
129

answered Mar 31 '17 at 18:28

adharris

3,591
1
21
18

1

you are using event emitters wrong. they are for child -> parent communication, not for parent -> child. What I posted works for me: https://plnkr.co/edit/YtaRtA0e5L6ewxq7uCH9?p=preview – adharris Mar 31 '17 at 19:01
8

`Renderer` and it's `.invokeElementMethod()` method have been deprecated as this point in time. It is now safe to call `this.elementRef.nativeElement.focus()` directly. – Pete Gardner May 20 '17 at 18:49

score 3 · Answer 2 · answered Oct 11 '18 at 17:36

Most of the time, it doesn't work because the focus event is followed by other events. So the element lost focus. We need to use setTimeout in order to put it at the end of the Task Scheduler queue:

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

@Directive({
  selector: '[focus]'
})
export class FocusDirective implements OnChanges {
  @Input('focus') focus: boolean;

  constructor(private elementRef : ElementRef) { }

  ngOnChanges() {
    if (this.focus) {
      setTimeout(() => { this.elementRef.nativeElement.focus(); }, 0);      
    }
  }
}

score 1 · Answer 3 · answered Mar 31 '17 at 21:39

A cleaner way to achieve this without having to use a directive is to use <label> instead of <button> and use css to style it like a button. For example,

<label for="myInput"></label> <input id="myInput"></input>

This way you can achieve focus even with the presence of *ngIf because the <input> is now bound to the <label>. Also, Angular2 documentation website warns about the use of ElementRef because of the security vulnerability it poses.

*ngIf with focus directive

3 Answers3