Add binding markup to the template HTML
- to tell Angular how to connect both sides
Target properties must be explicitly marked as Input or Output properties using decorators: - @Input() dish: Dish;
- @Output() deleteDish = new EventEmitter()
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]