Child to parent component communication in angular 8

Parent component to child component interaction

Child1 Component

child1.component.ts =>

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

@Component({

  selector: 'app-child1',

  templateUrl: './child1.component.html',

  styleUrls: ['./child1.component.css']

})

export class Child1Component implements OnInit {

  @Output() public childUsername = new EventEmitter();

  fireEvent(){

    this.childUsername.emit('Hey! This is the Child component');

  }

  constructor() { }

  ngOnInit() {

  }

}

child1.component.html =>

<div class="text-danger bg-success text-right mt-2 mb-2"><h4>child component2 </h4>

  <p>we have to use event binding for child to parent component communication/interaction.</p>

  <button class="btn btn-danger m-1" (click)="fireEvent()">send to parent</button>

</div>

Parent component

parent1.component.ts=>

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

@Component({

  selector: 'app-parent1',

  templateUrl: './parent1.component.html',

  styleUrls: ['./parent1.component.css']

})

export class Parent1Component implements OnInit {

  public message = '' ;

  constructor() { }

  ngOnInit() {

  }

}

parent1.component.html=>

<div class="text-center  bg-primary text-white p-1 m-2">

  <H3>CHILD TO PARENT COMPONENT COMMUNICATION </H3>

  <h4 class="text-danger">  {{message}}</h4>

  <app-child1 (childUsername)="message=$event"> </app-child1>

</div>