6
votes

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>
4

4 Answers

8
votes

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

1
votes

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
0
votes
 <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.

0
votes

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>