Angular2 hostlistener

Question

How do you get HostListener working in good old ES6. Currently have...

import { Directive, HostListener }                from 'angular2/core';

@Directive({
    selector: 'focusable',
    hostListeners: {
        'focus' : 'focus()',
        'click' : 'click()'
    }
})
export class FocusableComponent {
    constructor(){
        console.log('constructed');
    }

    focus() {
        console.log('Im focused');
    }

    click() {
        console.log('ive been clicked');
    }
}

From what i could make out from the docs... this seems to be how people have done it, but not working for me!

Answer 1

You should do this way:

@Directive({
  selector: '[focusable]',
  host: {
    '(focus)' : 'focus()',
    '(click)' : 'click()'
  }
})
export class FocusableComponent {
  constructor(){
    console.log('constructed');
  }

  focus() {
    console.log('Im focused');
  }

  click() {
    console.log('ive been clicked');
  }
}

See this plunkr: https://plnkr.co/edit/pBxcqP25JTLTzKY2AwyP?p=preview .