*ngIf with focus directive

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', []);
    }
  }
}

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);      
    }
  }
}