@Output from Child component doesn't trigger EventEmitter in Angular 7

Question

I would like the child component to send some data to the parent component. The child part is executed as expected, but the parent code doesn't react, and there are no errors. So if have any idea ...

Child HTML

<button  (click)="sendDataToParent()">  CLICK ME !  </button>

Child TS

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Hero } from '../Hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

  @Input() hero : Hero;   
  @Output() sendDataHeroEvent: EventEmitter<Hero> = new EventEmitter<Hero>();

  constructor() { }
  ngOnInit() { }

  sendDataToParent(event: any){
    let hero2: Hero; hero2 = new Hero();  hero2.id = 12; hero2.name = "Narco";
    this.sendDataHeroEvent.emit(hero2);
    console.log("OK, child emits data to parent");
  }
}

Parent HTMl

<h2>My Heroes</h2>
<ul class="heroes"
    (sendDataHeroEvent)="sendDataHeroEventHandler($event)">
    <li *ngFor="let hero of heroes" 
        (click)="onSelect(hero)"
        [class.selected]="hero === selectedHero"
        class="drag-box" 
        cdkDragLockAxis="y"
        cdkDrag> 
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
</ul>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>

Parent TS

import { Component, OnInit } from '@angular/core';
...
export class HeroesComponent implements OnInit {
...
sendDataHeroEventHandler(event){
    console.log("OK, parent handler is called");
}

In the console log of chrome, i get "OK, child emits data to parent" but i do not get "OK, parent handler is called"

Ritesh Waghela · Accepted Answer · 2019-04-25 08:46:41Z

2

You are not binding the output property correctly to your child component. In fact there is no output property binding. Modify the below code

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

to

<app-hero-detail [hero]="selectedHero" (sendDataHeroEvent)="sendDataHeroEventHandler($event)"></app-hero-detail>

and remove the binding from here:

<ul class="heroes"
    **(sendDataHeroEvent)="sendDataHeroEventHandler($event)"**> // Take this out
    <li *ngFor="let hero of heroes" 
        (click)="onSelect(hero)"
        [class.selected]="hero === selectedHero"
        class="drag-box" 
        cdkDragLockAxis="y"
        cdkDrag> 
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
</ul>

answered Apr 25, 2019 at 8:46

Ritesh Waghela

3,7272 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erixx Over a year ago

thanks. And for getting the Hero send by the child, i used the following function on the TS of parent side : sendDataHeroEventHandler($event: Hero){ console.log("parent " + $event.name); }

Ashish Ranjan · Accepted Answer · 2019-04-25 08:17:08Z

2

Add the event handler in child component selector tag.

<app-hero-detail 
  [hero]="selectedHero"
  (sendDataHeroEvent)="sendDataHeroEventHandler($event)">
</app-hero-detail>

answered Apr 25, 2019 at 8:17

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Comments

tilo · Accepted Answer · 2019-04-25 08:16:32Z

1

You need to change the template of your parent to

<ul class="heroes">
    <li *ngFor="let hero of heroes" 
        (click)="onSelect(hero)"
        [class.selected]="hero === selectedHero"
        class="drag-box" 
        cdkDragLockAxis="y"
        cdkDrag> 
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
</ul>
<app-hero-detail [hero]="selectedHero" (sendDataHeroEvent)="sendDataHeroEventHandler($event)"></app-hero-detail>

answered Apr 25, 2019 at 8:16

tilo

14.2k6 gold badges71 silver badges86 bronze badges

Collectives™ on Stack Overflow

@Output from Child component doesn't trigger EventEmitter in Angular 7

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related