Data Binding in Angular

[puddlejumper26]

Property

• Element Property
• Component Property
• Directive Property

e.g. src, hero, and ngClass in the following

<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>

Event

• Element event
• Component event
• Directive event

e.g. click, deleteRequest, and myClick in the following

<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>

Two-way

• Event
• Property

e.g.

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

Here needs to import FormsModule in the Module.

Attribute

-Attribute

e.g.

<button [attr.aria-label]="help">help</button>

Class

• class property

e.g.

<div [class.special]="isSpecial">Special</div>

Style

• style property

e.g.

<button [style.color]="isSpecial ? 'red' : 'green'">

Reference

[1] https://angular.io/guide/template-syntax#binding-types-and-targets