Child-to-parent communication using EventEmitter

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  message: string = "Hey there from the child!";

  @Output() fromChild = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.fromChild.emit(this.message);
  }
}

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (fromChild)="setMessage($event)"></app-child>
  `
})
export class ParentComponent {
  message:string;
  
  constructor() { }
  
  setMessage($event) {
    this.message = $event;
  }
}