First talk about classification
The following example can explain:
<div>
<li>{
{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>
</div>
In the first <li>, { {hero.name}}, this is an interpolation binding , that is, the variables we define in the controller, and the data can be displayed directly to the foreground.
The second [hero] property binding passes the selectedHero value of the parent component HeroListComponent to the hero property of the child component HeroDetailComponent.
The third event is bound to the click binding event.
Two-way binding : this <input [(ngModel)]="myData">
Main function: the template and the controller keep the data consistent
When we use it, we need to add the FormsMudule module in Angular
