Add binding markup to the template HTML

• to tell Angular how to connect both sides
  

component ----> DOM

<li>{{hero.name}}</li>

• displays the component’s hero.name property value within the
• element.

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

• [hero] is property binding
• [hero] passes the value of selectedHero
• from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

DOM -----> Component

<li (click)="selectHero(hero)"></li>

• (click) is event binding
• (click) calls the component’s selectHero method when user clicks a hero’s name

Two-way binding

<input [(ngModel)]="hero.name">

• Component{ }: a data property value
• Property Binding: the property value flows to the input box
• Template< >: Users change and reset the property value
• Event Binding: the lastest value flows back to the component
  
  [communication between a template and its component]
  
  [communication between parent and child components]

Reference:
https://angular.io/guide/architecture-components