How parent component pass information to child component in Angular

child-to-parent.ts

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


@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  // The basic need of a child
  @Input() food: string;
  @Input() drink: string;
  @Input() game: string;

  // He/she needs some attention
  @Output() crying: EventEmitter<boolean> = new EventEmitter(false);

  constructor() { }

  ngOnInit(): void {
  }

}

child.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  // The basic need of a child
  @Input() food: string;
  @Input() drink: string;
  @Input() game: string;

  constructor() { }

  ngOnInit(): void {
  }

}

parent-feed-child.html

<!-- Inside parent component, or we can think, parent's house -->
<div class="parent">
  <div class="child">
    <app-child [drink]="'milk'" [food]="'cookie'" [game]="'chess'"></app-child>
  </div>
</div>

parent-update.html

<!-- Inside parent component, or we can think, parent's house -->
<div class="parent">
  <div class="child">
    <app-child [drink]="'milk'" [food]="'cookie'" [game]="'chess'" (crying)="hug()"></app-child>
  </div>
</div>

parent.html

<!-- Inside parent component, or we can think, parent's house -->
<div class="parent">
  <div class="child">
    <app-child></app-child>
  </div>
</div>