When the child component needs to communicate with its parent component, it can emit an event. This technique keeps the child component de-coupled from its parent (de-coupled: doesn't need to know its parents).
In Angular, we need to use a class named EventEmitter if we want to emit events.
You need to instantiate the EventEmitter class, assign it to a class property, and call the emit method.
In the following example, the child component will emit a custom event named TitleClicked when the user clicks on the title:
[app.component.ts]
import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'child-component',
template: `<h2 (click)="titleClicked.emit()">{{ title }}</h2>`
})
export class ChildComponent {
@Input() private title: string;
@Output() private titleClicked = new EventEmitter<any>();
}
@Component({
selector: 'app-root',
template: `
<h1>Component Interactions</h1>
<child...