Parent to child component communication in angular 8

Parent component to child component interaction

Parent Component

parent.component.ts =>

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

@Component({

  selector: 'app-parent',

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

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

})

export class ParentComponent implements OnInit {

 username:any = 'this is the parent child';

  constructor() { }

  ngOnInit() {

  }

}

parent.component.html =>

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

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

  <app-child [uname]='username'> </app-child>

</div>

Child component

child .component.ts =>

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

@Component({

  selector: 'app-child',

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

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

})

export class ChildComponent implements OnInit {

@Input()

uname;

  constructor() { }

  ngOnInit() {

  }

}

child.component.html =>

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

    <h3 class="text-white text-center"> {{uname}}</h3>

</div>