Components & Templates Flashcards
7 cards from real Angular Web Framework practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Components & Templates flashcards as text
Which Angular template syntax creates a local template reference variable for a DOM element?
Answer: #refName
The hash (#) prefix in a template creates a local reference variable that can be used elsewhere in the same template.
What does the `async` pipe do when used in a template with an Observable?
Answer: Subscribes and automatically unsubscribes, rendering the latest value
The async pipe manages the subscription lifecycle and pushes each emitted value into the template, unsubscribing on destroy.
In an Angular template, what does `(click)="handler($event)"` demonstrate?
Answer: Event binding with $event payload
Parentheses denote event binding, and $event is the DOM event object passed to the handler function.
Which directive would you use to repeat a block of HTML for each item in an array in Angular 17+ with the new built-in control flow?
Answer: @for
Angular 17 introduced the @for built-in control flow block as the modern replacement for the *ngFor structural directive.
What is the role of `trackBy` in an *ngFor directive?
Answer: Helps Angular identify items to minimize DOM re-renders
trackBy provides a unique identifier per item so Angular can reuse existing DOM nodes instead of destroying and recreating them.
What is the correct way to apply multiple CSS classes conditionally using `[ngClass]`?
Answer: [ngClass]="{ 'class1': cond1, 'class2': cond2 }"
Passing an object literal to [ngClass] where each key is a class name and the value is a boolean expression is the standard pattern.
Which decorator lets you listen to events on the host element of a directive or component without using the `host` metadata property?
Answer: @HostListener
@HostListener decorates a method and registers it as an event listener on the component's or directive's host element.