Template Language
Angular's template syntax: expression rules, property, attribute and event bindings, two-way binding, the @if, @for and @switch blocks and template variables. Interviewers probe each construct.
part ofAngularoverview, primer and where to startread it →on this pageshowhide
explore
- Expression Rules & Interpolation4 questions
- Property vs Attribute Binding5 questions
- Event Binding & Key Filters6 questions
- Banana-Box Two-Way Binding5 questions
- Conditional Blocks5 questions
- Tracked List Blocks5 questions
- Reference & Let Variables5 questions
questions
page 2 of 2An Angular template shows [object HTMLTextAreaElement] where a component's note text should be; how can template variable shadowing cause this, and how do you fix it?
basics
~20 sAngular resolves template names before component members, so a #note on a textarea shadows the component's note property and {{ note }} prints the element. Rename the reference, or write this.note to read the member explicitly.
When an Angular template writes [label]="x" or label="New" on a component element, where does the value go, and what changed for data- attributes in v22?
basics
~20 s[label]="x" sets every matching input on the element and skips the DOM property when an input matched; a static label="New" initialises the input with the string. Since Angular 22 a data-label attribute no longer binds the input; it stays a plain attribute.
In an Angular <ng-template>, what do let-item and let-i="index" declare, and how do they differ from #ref and @let?
basics
~10 sOn an Angular <ng-template>, let-item binds the context's $implicit value and let-i="index" its index property: read-only inputs supplied by the renderer, unlike #ref (a template target) or @let (a named expression).
In an Angular order-status banner, how do you make the build fail when a new OrderStatus value has no @case, and why does @switch (order().status) defeat it?
basics
~20 sEnd the @switch with @default never; so template type checking reports any unhandled union member. It relies on TypeScript narrowing, which does not work on a call like order().status, so read the signal into @let first.
In Angular, how do you add custom event syntax such as (input.debounce.300) with EVENT_MANAGER_PLUGINS, and how does EventManager pick the plugin?
basics
~10 sExtend EventManagerPlugin, implement supports() and addEventListener() returning a cleanup function, and provide it under EVENT_MANAGER_PLUGINS with multi: true. EventManager asks custom plugins first and the catch-all DOM plugin last.
showing 31–35 of 35