Angular @Output not working

Question

Trying to do child to parent communication with @Output event emitter but is no working here is the child component

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

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

@Output() emitor: EventEmitter<any>
  constructor() { this.emitor = new EventEmitter()}

   touchHere(){this.emitor.emit('Should Work');
   console.log('<><><><>',this.emitor) // this comes empty
  }

  ngOnInit() {
  }

}

this is the html template

<p>
<button (click)=" touchHere()" class="btn btn-success btn-block">touch</button>
</p>

The console.log inside the touchHere it shows nothing even if I put this inside the parent component it show nothing as well parent component

 import { Component , OnInit} from '@angular/core';
// service I use for other stuff//
    import { SenderService } from './sender.service';
// I dont know if I have to import this but did it just in case
    import { EmiterComponent } from './emiter/emiter.component'

@Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'app';
      user: any;
      touchThis(message: string) {
        console.log('Not working: ${message}');
      }
        constructor(private mySessionService: SenderService) { }
    }

and here is the html template

<div>
  <app-emiter>(touchHere)='touchThis($event)'</app-emiter>
</div>

Vega · Accepted Answer · 2018-05-31T06:43:45.940

10

Parent component template:

  <app-emitor (emitor)='touchThis($event)'></app-emiter>

In parent template @Output should be 'called', not the child method.

Also, see: https://angular.io/guide/component-interaction#parent-listens-for-child-event

edited May 31 '18 at 06:43

answered Jul 09 '17 at 19:14

Vega

27,856
27
95
103

@Output decorator is in child because the child will emit an event. That event should be console.logged but is showing empty. In the parent I put the event handler to receive that emitted event but in the child I should be seeing something when console.log – shark6552 Jul 09 '17 at 19:40
Of course @Output it is in child component and you should call it in parent template. In your code you are calling the child method (touchHere) instead – Vega Jul 09 '17 at 19:42
this is the parent template
(touchHere)='touchThis($event)'
I am calling touchHere that is inside the selector that is in the parent component. But in any case if I console.log in the child I should see something but I am not – shark6552 Jul 09 '17 at 19:46
It is an old question but thanks to Vega .. I had an error in the way I was writing the code – shark6552 May 31 '18 at 04:08
Glad you found a solution :) – Vega May 31 '18 at 06:43

score 2 · Answer 2 · answered May 15 '18 at 14:36

Here’s an example of how we write a component that has outputs:

@Component({
  selector: 'single-component',
  template: `<button (click)="liked()">Like it?</button>`
 })
 class SingleComponent {
 @Output() putRingOnIt: EventEmitter<string>;

 constructor() {
 this.putRingOnIt = new EventEmitter();
 }

 liked(): void {
 this.putRingOnIt.emit("oh oh oh");
 }
}

Notice that we did all three steps: 1. specified outputs, 2. created an EventEmitter that we attached to the output property putRingOnIt and 3. Emitted an event when liked is called.

If we wanted to use this output in a parent component we could do something like this:

@Component({
  selector: 'club',
  template: `
    <div>
      <single-component
        (putRingOnIt)="ringWasPlaced($event)"
        ></single-component>
    </div>`
})
class ClubComponent {
ringWasPlaced(message: string) { console.log(`Put your hands up: ${message}`);
} }
// logged -> "Put your hands up: oh oh oh"

Again, notice that:

putRingOnIt comes from the outputs of SingleComponent
ringWasPlaced is a function on the ClubComponent
$event contains the thing that wasemitted, in this case a string

score 0 · Answer 3 · answered Jul 09 '17 at 19:44

 <app-emiter (emitor)="touchThis($event)" ></app-emiter>

By using @Output() you should apply the event you need to emit in the directive of the emitter component.Adding the name of the variable to the the directive and but the emitted over function inside the quotation passing the $event.

score 0 · Answer 4 · answered Mar 13 '20 at 09:20

0

touchHere() is the method from which you are binding some value to emit with your EventEmitter. And your EventEmitter is 'emitor'.

So your code will work if you simply do the below:

<app-emiter (emitor)='touchThis($event)'></app-emiter>

answered Mar 13 '20 at 09:20

Soumya Rauth

1,163
5
16
32

Angular @Output not working

4 Answers4