Property Binding

The square-bracket syntax binds an expression to a DOM property or a component input.

4 min read Level 1/5 #angular#templates#binding

What you'll learn

Bind to native DOM properties like disabled and src
Bind to a child component's input
Tell the difference between attribute and property bindings

Interpolation puts text into your markup. Property binding sets DOM properties (and component inputs) to values from your component.

Native DOM Properties

<button [disabled]="!ready()">Submit</button>
<img [src]="user().avatarUrl" [alt]="user().name" />
<input [value]="draft()" />

The square brackets tell Angular: evaluate the right-hand side as JS, then assign the result to that DOM property whenever it changes. Without brackets you would set the literal string "!ready()".

Binding to Component Inputs

If a child component declares an input, you pass it the same way:

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<p>Hello {{ name() }}</p>`,
})
export class GreetingComponent {
  name = input.required<string>();
}

<app-greeting [name]="currentUser().name" />

Property vs Attribute

DOM properties are live JS values; HTML attributes are the initial strings the browser parsed. They are usually but not always the same. When you need to set an attribute that has no matching property, use [attr.*]:

<button [attr.aria-label]="label()">X</button>
<td [attr.colspan]="span()">cell</td>

Most of the time [disabled], [src], [value] Just Work — reach for [attr.*] only for ARIA, SVG, and the few HTML attributes without a JS property.

Event Binding →