CODEWITHSUNDEEP
javascriptangularangular-components
shark6552
shark6552

Reputation: 101

Angular @Output not working

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>

Upvotes: 8

Views: 21708

Answers (4)

Soumya Rauth
Soumya Rauth

Reputation: 1201

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>

Upvotes: 0

Vega
Vega

Reputation: 28708

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

Upvotes: 10

ValRob
ValRob

Reputation: 2682

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

Upvotes: 3

Mohamed Gabr
Mohamed Gabr

Reputation: 441

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

Upvotes: 0

Related Questions