CODEWITHSUNDEEP
angular
Lucas Dmnt
Lucas Dmnt

Reputation: 251

Angular2 : @Output and Event Emitter

I'm trying to follow this : http://learnangular2.com/outputs/

Here is what i have :

account.component.html

<app-messagerie (onViewMessages)="handleOnViewMessages($event)"></app-messagerie>
<a (click)="onViewMessagerie(users.id)">My messages</a>

account.component.ts

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

export class AccountComponent implements OnInit {

  @Output() onViewMessages = new EventEmitter();

...

onViewMessagerie(id){
  this.onViewMessages.emit(id)
}

messagerie.component.ts

handleOnViewMessages(id){
  console.log(id);
  console.log('ahah');
}

But nothing happen when i click.

Am i missing something, or doing something wrong ?

Thanks

Upvotes: 0

Views: 1968

Answers (1)

Vega
Vega

Reputation: 28738

You mixed up parent and child components. Account component is the parent, so it should hold handleOnViewMessages() method. messagerie component is the child, it should have @Output decorator to communicate with the parent via event emitter.

account.compoent.html

<app-messagerie (onViewMessages)="handleOnViewMessages($event)"></app-messagerie>

account.compoent.ts

export class AccountComponent implements OnInit {

....

handleOnViewMessages(event){
  console.log(event);
  console.log('ahah');
}

messagerie.component.ts

 @Output() onViewMessages = new EventEmitter();

...

onViewMessagerie(id){
  this.onViewMessages.emit(id)
}

messagerie.html

<a (click)="onViewMessagerie(users.id)">My messages</a>

You will though need to manage user.id as I am unable to see the whole code.

Upvotes: 1

Related Questions