Property and Event Binding
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.'
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. $eventexposes 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?
You May Also Like
Anatomy of a Component
A close look at the parts that make up an Angular component — the decorator metadata, class body, template, and styles — and how they fit together.
Template Syntax and Interpolation
How Angular templates blend HTML with expressions, and how interpolation renders component state directly into the DOM as text.
Input and Output Decorators
Understand how @Input() and @Output() enable parent-child component communication in Angular, including binding syntax, EventEmitter, and input transforms.
Template-Driven Forms
Explore Angular's template-driven forms approach, where form structure and validation rules live mostly in the HTML template using directives like ngModel and ngForm.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics