Failed to capture EventEmitter events in Angular2?

Question

I wrote a basic angular application that uses 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 on ES5) Sorry for the detailed example.

Any advice on what I am doing wrong would be very helpful.

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 the working plunker of your application.

 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 an event type, so it cannot be called loggedIn . It was easier for me just to simply call the update event.

Answer 2

I just struggled with this problem.

The reason it does not work is related to the event name case. If it were called loggedin rather than loggedIn, that would be nice.

Answer 3

In the Root class template, you must pass $ event to the loggedIn call:

 (loggedIn) = "loggedIn($event)" 

The $ event variable represents the object that you are passing in your journalist’s next method, loggedIn, in the Login class. Of course, your loggedIn method of your Root class should also take an object as an argument.

Answer 4

In my case, I forgot to decorate an element of the @Output() class, for example.

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

Answer 5

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

 this.complete.next(); 

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