Property and Event Binding

Analogy categoryAnalogies

Beyond interpolation, Angular provides two complementary binding mechanisms that form the backbone of dynamic templates: property binding, written with square brackets [property]="expression", which sets a DOM element or component property directly from the component class, and event binding, written with parentheses (event)="handler()", which calls a component method in response to a DOM or component event. Together these establish the two directions of data flow — property binding pushes data into the view, and event binding pulls data (or notifications) back out of it.

🏏

Cricket analogy: Property binding is like a scoreboard operator pushing the current score onto the big screen from the official scorer's data, while event binding is like the crowd's reaction (a wicket cheer) pulling the commentator's attention back to react.

Property Binding in Detail

Property binding targets an actual DOM element property (like disabled, value, or src), not the corresponding HTML attribute, which matters for cases where the attribute and property diverge — for example, an <input>'s value attribute only sets the initial value, while its value property reflects the current, live value. Property binding accepts any valid TypeScript/JavaScript expression, including booleans, numbers, objects, and method calls, and unlike interpolation, does not coerce the result to a string, so [disabled]="isSaving()" passes the actual boolean straight through.

🏏

Cricket analogy: Property binding targeting the live DOM property rather than the static attribute is like a scorecard's live 'current score' figure versus its printed 'toss result' attribute, which is set once and never updates during play, even as runs accumulate.

Event Binding in Detail

Event binding listens for a named DOM event (click, input, submit, etc.) or a custom component @Output event, and executes the given expression — typically a method call — when it fires. The special $event variable gives the handler access to the native event object (or, for a custom @Output, whatever payload the child component emitted), letting you read things like $event.target.value for form inputs or a typed payload from a custom event.

🏏

Cricket analogy: Event binding on a click listening for the tap and reading $event is like a third umpire reviewing a run-out appeal, receiving the exact replay footage ($event) needed to decide, rather than just being told 'someone appealed.'

typescript

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

@Component({
  selector: 'app-todo-input',
  standalone: true,
  template: `
    <input
      [value]="draft()"
      [disabled]="isSubmitting()"
      (input)="draft.set($any($event.target).value)"
      (keyup.enter)="submit()"
      placeholder="Add a todo"
    />
    <button [disabled]="draft().trim().length === 0" (click)="submit()">
      Add
    </button>
  `,
})
export class TodoInputComponent {
  draft = signal('');
  isSubmitting = signal(false);

  submit(): void {
    if (!this.draft().trim()) return;
    this.isSubmitting.set(true);
    // ...call a service, then reset
    this.draft.set('');
    this.isSubmitting.set(false);
  }
}

Angular supports binding directly to keyboard event filters like (keyup.enter) or (keydown.escape), which is syntactic sugar that saves you from manually checking $event.key inside the handler — a small but frequently used convenience not found in plain HTML.

A frequent point of confusion for developers coming from plain HTML is conflating attributes and properties: writing disabled="false" as a plain HTML attribute still renders the element disabled, because the mere presence of the attribute string is truthy in HTML. Using Angular's property binding [disabled]="false" correctly reflects the boolean value on the DOM property instead.

Property binding [property]="expression" sets a DOM/component property directly, preserving the expression's real type (boolean, number, object).
Event binding (event)="handler($event)" calls a method in response to a DOM event or a component's custom @Output.
$event exposes the native event object, or the emitted payload for a custom @Output event.
Property binding targets the live DOM property, which can differ in behavior from the corresponding static HTML attribute.
Keyboard event filters like (keyup.enter) let you bind to specific keys without manually inspecting $event.key.
Property and event binding together establish two-directional interaction between a component's state and the rendered DOM, without full two-way binding syntax.

Practice what you learned

1. What syntax is used for property binding in an Angular template?

2. What does the special `$event` variable represent inside an event binding handler?

3. Why is [disabled]="false" different from the plain HTML attribute disabled="false"?

4. What does (keyup.enter)="submit()" do?

5. Which statement correctly distinguishes property binding from interpolation?

Was this page helpful?

Template Syntax and Interpolation

Structural Directives: *ngIf and *ngFor

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#TypeScript#AngularStudyNotes#WebDevelopment#PropertyAndEventBinding#Property#Event#Binding#Detail#StudyNotes#SkillVeris

Property and Event Binding