Property & Event Binding

Bind DOM properties and respond to user events using Angular's square-bracket and parenthesis binding syntax.

Property Binding

Square brackets bind a DOM property (or a component's @Input, covered soon) to an expression from your component class — the value updates automatically whenever the underlying expression changes.

@Component({
  selector: 'app-photo',
  standalone: true,
  template: `<img [src]="imageUrl" [alt]="imageAlt" />`,
})
export class PhotoComponent {
  imageUrl = '/product.png';
  imageAlt = 'Product photo';
}

Binds a Property, Not Just an Attribute

[src]="imageUrl" binds the DOM element's actual src property, not just the initial HTML attribute — this distinction matters for things like a checkbox's checked state, which is a property that can change independently of its HTML attribute.

Event Binding

Parentheses attach an event listener, running an expression or method when that event fires.

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="increment()">Clicked {{ count }} times</button>
  `,
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

Accessing the Event Object

The special $event variable gives you access to the native DOM event object inside an event binding expression.

@Component({
  selector: 'app-search',
  standalone: true,
  template: `<input (input)="onSearch($event)" />`,
})
export class SearchComponent {
  onSearch(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    console.log(value);
  }
}

Combining Both

Property and event binding together implement a fully controlled input — reading the value with property binding, and updating state with event binding — the foundation ngModel (covered next) builds on top of.

@Component({
  selector: 'app-name-input',
  standalone: true,
  template: `
    <input [value]="name" (input)="name = $any($event.target).value" />
    <p>Hello, {{ name }}</p>
  `,
})
export class NameInputComponent {
  name = '';
}

Common Beginner Mistakes

Forgetting the square brackets for property binding

src="imageUrl" sets a literal string "imageUrl", not the value of the imageUrl property — you need [src]="imageUrl" to bind an expression.

Forgetting parentheses for event binding

click="increment()" does nothing meaningful — event bindings require the parenthesis syntax, (click)="increment()".

FAQs

Can I bind to a custom component's own property, not just a native DOM one?

Yes — as long as that property is declared with @Input() on the receiving component, covered in the input/output lesson.

Is there a shorthand combining property and event binding, like v-model in Vue?

Yes — Angular's banana-in-a-box syntax, [(ngModel)], covered in the next lesson, is exactly that shorthand for two-way binding.

Summary

Square brackets bind properties, and parentheses bind events — together they cover the vast majority of template interactivity. Next, you'll learn the two-way binding shorthand built on top of both.

Next Lesson →