Having trouble using @Ouput decorator to communicate with parent in Angular 2+

Question

I know that there are questions relating this topic and I took a look at the docs but I couldn't understand how to use outputs.

I have a child component with this @Output

//here I define the Ouput on the child component
@Output() turvo: EventEmitter<boolean> = new EventEmitter();

//here I emit the event on the child component
ngOnInit() {
  this.turvo.emit(false);
}

The parent component

//here I listen to the emitted event on the parent
<div (turvo)="atribuirTurvoDoFilho($event)"></div>

//here is the function that should be executed on the parent.
public atribuirTurvoDoFilho(data) {
  console.log("I will never execute :(");
  this.turvo = data;
}

I got no errors but no communication occurs.

The event handler must be set in the child component tag: ``. — ConnorsFan, Mar 05 '18 at 21:25
Possible duplicate of [How to communicate between component in Angular?](https://stackoverflow.com/questions/30501577/how-to-communicate-between-component-in-angular) — Igor, Mar 05 '18 at 21:32
The event handler must be set on the component tag of the component that emits it. — joh04667, Mar 05 '18 at 22:14
@DiegoAlves - [This post](https://stackoverflow.com/q/37662456/1009922) should answer your question about handling events with a router outlet. — ConnorsFan, Mar 05 '18 at 22:28

score 0 · Answer 1 · answered Mar 05 '18 at 22:38

If you want to have a working solution, please share your full child component.

For now, I can see, that you try to run your output on the div element - which is a html tag, not a angular component.

If you define an output, it will be working only for that component where is defined.

Having trouble using @Ouput decorator to communicate with parent in Angular 2+

1 Answers1