Event emitter in angular 2 not catch up

Question

I am using Angular 2 beta 6.

My custom event is not catched up

import {Component, OnInit, EventEmitter} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import {Output} from "angular2/core";
@Component({
    template: '<form class="form-horizontal" (ngSubmit)="onSubmit()" #registrationForm="ngForm" style="color: #676767">
         <button type="submit" >Send Event</button>
   </form>'

})
export class registrationComponent {

    @Output() logged: EventEmitter<any> = new EventEmitter();

    onSubmit () {
        console.log(Button clicked);
        this.logged.emit(null); // Emits an event on clicking the button
         }

}

I added another component with listening to my event logged.

import {Component} from 'angular2/core';

@Component({
    selector: 'message-com',
    template: '<div (logged)="getLoggedIn($event)">Hello<div>'
})
export class MessageComponent {


    getLoggedIn() {

        alert("Event received ");

    }
}

I am getting "Button clicked" in my console. But I am expecting "Event received "

Please add more information. What is the selector of `registrationComponent`? — Günter Zöchbauer, Mar 01 '16 at 09:21

score 0 · Answer 1 · answered Mar 01 '16 at 09:20

0

templateUrl: <div (logged)="getLoggedIn($event)">Hello<div>'

should be

template: '<div (logged)="getLoggedIn($event)">Hello<div>'

and a <div> doesn't emit the logged event.

answered Mar 01 '16 at 09:20

Günter Zöchbauer

623,577
216
2,003
1,567

score 0 · Answer 2 · answered Mar 01 '16 at 09:30

0

I think that there is a problem when linking your two component together (in addition to the problem found by @Günter). You don't use the registrationComponent in the MessageComponent one. This way you can't catch the event since the registrationComponent is actually used in the MessageComponent one.

You should refactor your two components this way:

Add a selector for the registrationComponent component:

import {Component, OnInit, EventEmitter} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import {Output} from "angular2/core";
@Component({
  selector: 'registration',
  templateUrl: 'views/registration.html'
})
export class registrationComponent {
  @Output() logged: EventEmitter<any> = new EventEmitter();

  onSubmit () {
    this.logged.emit(null);
  }
}

Set the registrationComponent in the directives attribute of the MessageComponent component and use it thanks to its selector:

import {Component} from 'angular2/core';
import {registrationComponent} from '...';

@Component({
  selector: 'message-com',
  template: `
    <registration (logged)="getLoggedIn($event)">Hello<registration>
  `,
  directives: [ registrationComponent ]
})
export class MessageComponent {
  getLoggedIn() {
    alert("Event recieved ");
  }
}

answered Mar 01 '16 at 09:30

Thierry Templier

198,364
44
396
360

I am loading registraton component and message component in my app component Loading ... Loading.. – QCG Mar 01 '16 at 09:38
It's not the right way to do :-( Set only your main one `message-com` in your HTML entry file and bootstrap it: `boostrap(MessageComponent);`. Then use the `registrationComponent` component into your `MessageComponent` one. Events are only catched by the parent component so `MessageComponent` needs to be the parent of the `registrationComponent`. That's why you need use `registrationComponent` inside `MessageComponent`... – Thierry Templier Mar 01 '16 at 09:41
I changed the getLoggedIn() { alert("Event received "); } code to the app.componet.ts file, Is that make sense? Then the registration is child and it sends event to parent component "app.component". Is this good ? – QCG Mar 01 '16 at 09:50
I don't exactly know your use case but it seems good. If you want to exchange event between components that haven't this relationship (parent / child), you could use an `EventEmitter` property within a shared service. See these questions: http://stackoverflow.com/questions/35719496/toggle-property-in-parent-component-from-child-component-in-angular2-similar-to/35719561#35719561 and http://stackoverflow.com/questions/34376854/delegation-eventemitter-or-observable-in-angular2/34402436#34402436. – Thierry Templier Mar 01 '16 at 09:58

Event emitter in angular 2 not catch up

2 Answers2