*ngIf with focus directive
EventEmitter
s are for @Output
s, not for @Input
s. 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', []);
}
}
}
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.
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);
}
}
}