Angular7 min read

Property Binding: Set HTML Attributes the Angular Way

Learn how to bind values to HTML properties like src, disabled, and class.

Ava Simmons
December 21, 2025
0.0k0

Property binding lets you set HTML properties using component data. ## Example: disable a button ```html <button [disabled]="isSaving">Save</button> ``` ```ts export class SaveComponent { isSaving = true; } ``` When `isSaving` is true, the button becomes disabled. ## Example: image src ```html <img [src]="avatarUrl" alt="Avatar" /> ``` ```ts export class AvatarComponent { avatarUrl = 'https://example.com/avatar.png'; } ``` ## Class binding (clean styling) ```html <p [class.active]="isActive">Status</p> ``` ```ts export class StatusComponent { isActive = true; } ``` > Next: Two-way binding with ngModel (simple forms quickly).

#Angular#Binding#Beginner