Several ways to make an angular child-to-parent communication

child.component.ts

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

@Component({
  selector: 'app-child',
  template: `<h1>I am the child</h1>`
})
export class ChildComponent {
  message = 'Hey there from the child!';
  constructor() { }
}

parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "./child.component";

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ message }}
    <app-child></app-child>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child;
  message:string;

  constructor() { }

  ngAfterViewInit() {
    this.message = this.child.message;
  }
}