Angular @Output not working

user_4770169 0
Viewed 15470

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>
angular-components angular javascript
4 Answers

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
user_33469700

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>
user_12883350
Related