How to send data from Parent to Child component in angular ?

Photo by Zetong Li on Unsplash

communication / interaction is for making things work is needed.

So for sending data from child to parent component we use Input function( Input decorator ) feature of component to receive data.

lets say we component hero (child) in heroes ( parent list component)

hero should have input

export class HeroChildComponent {
  @Input() hero!: Hero;

Inside template view/html of Parent component

 <app-hero-child
      *ngFor="let hero of heroes"
      [hero]="hero">
 </app-hero-child>