Property Binding: Set HTML Attributes the Angular Way

Property binding lets you set HTML properties using component data.

Example: disable a button

<button [disabled]="isSaving">Save</button>

export class SaveComponent {
  isSaving = true;
}

When isSaving is true, the button becomes disabled.

Example: image src

<img [src]="avatarUrl" alt="Avatar" />

export class AvatarComponent {
  avatarUrl = 'https://example.com/avatar.png';
}

Class binding (clean styling)

<p [class.active]="isActive">Status</p>

export class StatusComponent {
  isActive = true;
}

Next: Two-way binding with ngModel (simple forms quickly).