Property Binding

People often describe property binding as one-way data binding because it flows a value in one direction, from a component's data property into a target element property.

The following binding pairs do the same thing

<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">

<img src="{{heroImageUrl}}"> <!--With Interpolation-->

When setting an element property to a non-string data value, you must use property binding.

Target - Element Property

<img [src]="heroImageUrl">
<button [disabled]="isUnchanged">Cancel is disabled</button>

Target - Component Property

In template of Parent Component

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

In ts of Child Component

@Input() hero: Hero;

It's a one way data binding from the selectedHero property of the HeroesComponent to the hero property of the target element, which maps to the hero property of the HeroDetailComponent.

Target - Directive Property

<div [ngClass]="classes">[ngClass] binding to the classes property</div>