Angular & Signals (283 Qs)•Part 1: Architecture, Components, Directives & Lifecycle (1 - 35)
What are template statements?
A template statement responds to an event raised by a binding target, such as an HTML element, component output (@Output()), or directive. Template statements appear in quotes to the right of the (event) symbol in event binding syntax: (event)="statement".
1. Event Binding Syntax Examples
html
<!-- Calling a component method -->
<button (click)="onSaveProfile()">Save Profile</button>
<!-- Calling a method with the DOM event object ($event) -->
<input (input)="onSearchQueryChange($event)" placeholder="Search..." />
<!-- Inline statement execution -->
<button (click)="isExpanded = !isExpanded">Toggle</button>
2. Template Expressions vs. Template Statements Comparison
| Dimension | Template Expression ([prop]="expr", {{ expr }}) | Template Statement ((event)="stmt") |
|---|---|---|
| Primary Purpose | Read data and compute a view value | Respond to user interactions and trigger actions |
| Side Effects | ❌ Strictly Prohibited (must be pure & idempotent) | ✅ Allowed & Expected (updates component state, triggers APIs) |
| Return Value | Required (assigned to binding target) | Ignored (typically returns void) |
| Execution Timing | Automatically on every Change Detection tick | Only when the bound DOM or component event fires |
Chaining (;) | ❌ Prohibited | ✅ Allowed (e.g., (click)="save(); closeModal()") |
Assignment (=) | ❌ Prohibited | ✅ Allowed (e.g., (click)="isOpen = false") |
3. Prohibited Syntax in Template Statements
Even though template statements allow side effects, Angular still disallows certain JavaScript constructs for security and sanity:
newkeyword (instantiating classes should happen in TypeScript component logic).- Increment and decrement operators (
++and--). - Bitwise operators (
|and&). - Template pipe operators (
|cannot be used inside event statements).