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

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 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.