`Property Binding`

Binds a DOM property or component input to a template expression.

Since Angular 2+ Spec ↗

Syntax

[property]="expression"

Parameters

Name	Type	Required	Description
`expression`	`any`	No	Value assigned to the element/component property.

Returns

template binding — Keeps the target property in sync with the expression.

Examples

@Component({
  selector: 'app-x',
  standalone: true,
  template: `
    <img [src]="avatarUrl" [alt]="name" />
    <app-card [title]="heading"></app-card>
  `,
})
export class XComponent {
  avatarUrl = '/a.png';
  name = 'Ada';
  heading = 'Hello';
}

Notes

Square brackets bind to the element's DOM property (not the HTML attribute) or a component/directive input. Use `[attr.name]` to bind real attributes like aria-* and `[class.x]`/`[style.x]` for class and style. Binding is one-way from component to view.