Unable to catch events from EventEmitter in Angular2?

Question

I have written a basic angular application that utilises the EventEmitter class, however i cannot get the listening component to catch the event.

Here is my code (using alpha.27 on Angular2 / TypeScript 1.5 compiling to ES5) Apologises for the verbose example.

Any advice on what i am incorrectly doing what would be greatly appreciated.

import {Component, View, EventEmitter} from 'angular2/angular2';

@Component({
    selector: 'login',
    events : ['loggedIn']
})

@View({
    template: '<button type="button" (click)="submitForm()">Click Me</button>'
})

export class Login {

    loggedIn = new EventEmitter();

    constructor() { 
    }

    submitForm() {
        console.log("event fired");
        this.loggedIn.next({});
    }

}


@Component({
    selector: 'app'
})

@View({
    template: "<div>This is the application</div>"
})

export class App {
    constructor() {

    }
}

@Component({
  selector: 'root'
})

@View({
  template: '<app [hidden]=!showApp></app><login (loggedIn)="loggedIn()" [hidden]=showApp></login>',
  directives: [ App, Login ]
})

export class Root {

    showApp:boolean;

    constructor() { 
        this.showApp = false; 
    }

    loggedIn() { 
        console.log("event caught");
        this.showApp = true; 
    }

}

Answer 1

Here is a working Plunker of your app.

import {Component, View, EventEmitter, bootstrap} from '@angular/core';

@Component({
   selector: 'login',
  events : ['update']
})
@View({
  template: '<button type="button" (click)="submitForm()">Login</button>'
})
class Login {
  constructor() { 
    this.update = new EventEmitter();
  }
  submitForm() {
    this.update.next();
  }
}


@Component({
  selector: 'app'
})
@View({
  template: "<div>This is the application</div>"
})
class App {}

@Component({
 selector: 'root'
})
@View({
  template: `
  <app [hidden]="!showApp"></app>
  <login (update)="loggedIn()" 
    [hidden]="showApp"></login>
  `,
  directives: [App, Login]
})
class Root {
    showApp:boolean;
    constructor() { 
        this.showApp = false; 
    }
    loggedIn() { 
        this.showApp = true; 
    }
}

bootstrap(Root);

I think there were a few problems. (update) in the template is a type of event, so it can't be called loggedIn. I found it easier just to call the event update altogether.

Answer 2

Have you seen this example? Viktor Savkin uses almost everything the same as you, but without an empty object in this line:

this.complete.next();

On the AngularU, Misko has shown an example with EventEmitter: https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update starting at 41:00

Answer 3

In the template of the Root class, you should pass $event into the loggedIn call:

(loggedIn) = "loggedIn($event)"

The $event variable represents the object that you pass in the next method of your loggedIn emitter in the Login class. Of course, your loggedIn method of your Root class should also accept an object as an argument.

Answer 4

Just struggled with this issue myself.

The reason it doesn't work is due to the case of the event name. If this was named loggedin rather than loggedIn it would have been fine.

Answer 5

In my case I forgot to decorate the class member with @Output(), e.g.

@Output() close: EventEmitter<DialogResult> = new EventEmitter<DialogResult>();