pencils ready ✎

Angular MCQs multiple-choice questions with answers & explanations

All 232 Angular quiz questions on one page. Pick an answer in your head, then open Show answer to check it and read why. Want a score and a timer? Take them as a quiz instead.

Written by Aditya MishraTechnical Lead, BNP Paribas

Official reference: angular.dev

✎ Take the Angular quiz 112 Angular interview questions →

Browse 25 study areas · 250 additional questions

Choose a focused set of questions. Coverage includes modern APIs, practical scenarios and maintenance of older applications; check version requirements for your project.

components and standalone2 scenarios · 8 MCQs
templates and control flow2 scenarios · 8 MCQs
directives and pipes2 scenarios · 8 MCQs
lifecycle and queries2 scenarios · 8 MCQs
dependency injection2 scenarios · 8 MCQs
signals and resources2 scenarios · 8 MCQs
change detection and zoneless2 scenarios · 8 MCQs
rxjs fundamentals2 scenarios · 8 MCQs
rxjs operators2 scenarios · 8 MCQs
rxjs interop and cleanup2 scenarios · 8 MCQs
reactive forms2 scenarios · 8 MCQs
form integration and signal forms2 scenarios · 8 MCQs
angular routing2 scenarios · 8 MCQs
http and interceptors2 scenarios · 8 MCQs
angular testing2 scenarios · 8 MCQs
server rendering and hydration2 scenarios · 8 MCQs
deferred loading and performance2 scenarios · 8 MCQs
angular security2 scenarios · 8 MCQs
accessibility and cdk2 scenarios · 8 MCQs
typescript cli and builds2 scenarios · 8 MCQs
state management and architecture2 scenarios · 8 MCQs
styles and internationalization2 scenarios · 8 MCQs
dynamic components and platform2 scenarios · 8 MCQs
ngmodules and migration2 scenarios · 8 MCQs
angular practical design2 scenarios · 8 MCQs

Search questionsSubtopicDifficulty

232 questions

1.
A standalone template uses another standalone component. Where is that dependency declared?
easy
1. AIn the consuming component's imports
2. BOnly in its providers
3. COnly in package.json
Show answer
Answer: A (In the consuming component's imports)
Template dependencies and dependency-injection providers serve different purposes.
try it in the quiz →
2.
What does a component selector identify?
easy
1. AIts server API endpoint
2. BIts dependency-injection lifetime
3. CWhere its component can be matched in templates
Show answer
Answer: C (Where its component can be matched in templates)
Selectors connect template usage to a component definition; they do not define routing or service scope.
try it in the quiz →
3.
Who normally owns the value passed into a component input?
easy
1. AThe browser history
2. BThe parent or calling binding
3. CThe child's private stylesheet
Show answer
Answer: B (The parent or calling binding)
Inputs convey data into a component. Request changes through an explicit output or shared state contract.
try it in the quiz →
4.
Do Angular custom output events automatically bubble like native DOM events?
mid
1. ANo
2. BYes, through every ancestor
3. COnly when named click
Show answer
Answer: A (No)
Outputs are Angular bindings to a component's emitted events, not automatic DOM bubbling events.
try it in the quiz →
5.
What does a model input support?
mid
1. AOnly a database entity
2. BAutomatic server validation
3. CA writable value with a corresponding change output for two-way binding
Show answer
Answer: C (A writable value with a corresponding change output for two-way binding)
Model inputs express a bidirectional component value contract; they do not establish backend correctness.
try it in the quiz →
6.
What can input.required express to Angular's tooling?
mid
1. AA required route guard
2. BA required input binding
3. CA required browser cookie
Show answer
Answer: B (A required input binding)
Required inputs help catch missing bindings, but the application still needs to validate external data.
try it in the quiz →
7.
What is an input transform useful for?
mid
1. ANormalizing an incoming bound value
2. BSending network requests on every read
3. CEditing the parent's object directly
Show answer
Answer: A (Normalizing an incoming bound value)
Keep input transformations pure and focused on converting the accepted input representation.
try it in the quiz →
8.
Which mechanism displays content supplied between a component's tags?
easy
1. AOnly a router outlet
2. BAn HTTP interceptor
3. CContent projection with ng-content
Show answer
Answer: C (Content projection with ng-content)
Projection lets a wrapper place caller-owned content in its template without recreating that content's domain logic.
try it in the quiz →
9.
When an attribute such as aria-label needs a dynamic value, which binding explicitly targets the attribute?
easy
1. AOnly a template reference variable
2. BA providers entry
3. CAn attr binding such as [attr.aria-label]
Show answer
Answer: C (An attr binding such as [attr.aria-label])
Attribute binding updates the HTML attribute rather than assuming there is a matching DOM property.
try it in the quiz →
10.
What does $event represent in an event binding?
easy
1. AThe entire application state
2. BThe event or emitted value supplied by that binding
3. CThe component injector
Show answer
Answer: B (The event or emitted value supplied by that binding)
For native events it is a DOM event; for custom outputs it is the emitted payload.
try it in the quiz →
11.
Why use an alias for an expression result in a conditional block?
mid
1. ATo reuse the evaluated value clearly within that block
2. BTo create a global service
3. CTo change the browser URL
Show answer
Answer: A (To reuse the evaluated value clearly within that block)
A local alias can improve readability and avoid repeating the same expression in the block.
try it in the quiz →
12.
What should a dynamic @for list track when items can reorder?
mid
1. AA random number each render
2. BThe translated display label
3. CA stable unique item identity
Show answer
Answer: C (A stable unique item identity)
Stable tracking preserves the relationship between records and their rendered views during updates.
try it in the quiz →
13.
What is the purpose of an @empty block paired with @for?
easy
1. ADelete the parent component
2. BRender a deliberate empty collection state
3. CHandle all server exceptions
Show answer
Answer: B (Render a deliberate empty collection state)
Empty results are different from loading or failure; represent those separately.
try it in the quiz →
14.
When is @switch useful?
easy
1. ARendering alternatives based on one expression
2. BRegistering HTTP endpoints
3. CCreating service providers
Show answer
Answer: A (Rendering alternatives based on one expression)
Control-flow blocks choose template output while leaving data ownership and side effects elsewhere.
try it in the quiz →
15.
What does a template reference variable commonly expose?
easy
1. AEvery service globally
2. BOnly a string literal
3. CAn element, component or exported directive in template scope
Show answer
Answer: C (An element, component or exported directive in template scope)
Its value depends on where it is declared and any export alias; it is scoped to the template context.
try it in the quiz →
16.
Why can an expensive method call in a template cause performance problems?
mid
1. AMethods are forbidden in templates
2. BIt may run repeatedly during change detection
3. CAngular always memoizes arbitrary methods
Show answer
Answer: B (It may run repeatedly during change detection)
Move repeated expensive derivation into an appropriate cached or reactive computation after measuring the cost.
try it in the quiz →
17.
What is an attribute directive commonly used for?
easy
1. AReplacing all component templates
2. BAdding behavior to an existing element
3. CDefining an entire server route
Show answer
Answer: B (Adding behavior to an existing element)
Directives can encapsulate reusable element behavior without requiring a new component view.
try it in the quiz →
18.
What distinguishes a structural directive in legacy template syntax?
easy
1. AIt manages embedded view structure
2. BIt only changes text color
3. CIt must make a network request
Show answer
Answer: A (It manages embedded view structure)
Structural directives can create or remove template views; attribute directives generally modify existing element behavior.
try it in the quiz →
19.
Why can legacy star syntax not place two structural directives directly on one element?
mid
1. AOnly one service exists per element
2. BCSS selectors forbid it
3. CEach shorthand expands around one template boundary
Show answer
Answer: C (Each shorthand expands around one template boundary)
Use explicit nested template or container boundaries, or appropriate built-in control-flow blocks.
try it in the quiz →
20.
A pure pipe receives a mutated object with the same reference. What may happen?
mid
1. AIt recreates the component
2. BIts transform is not rerun for that mutation alone
3. CIt always deeply inspects the object
Show answer
Answer: B (Its transform is not rerun for that mutation alone)
Pure pipe change detection depends on input values or references, not arbitrary deep mutation.
try it in the quiz →
21.
Why use impure pipes cautiously?
mid
1. AThey can run on every relevant change-detection pass
2. BThey are evaluated only once
3. CThey automatically move work to a worker
Show answer
Answer: A (They can run on every relevant change-detection pass)
Repeated transformation can be costly, especially for large collections.
try it in the quiz →
22.
What does AsyncPipe do when its hosting view is destroyed?
mid
1. AKeeps every subscription forever
2. BCompletes the original Subject for all consumers
3. CUnsubscribes from its subscribed source
Show answer
Answer: C (Unsubscribes from its subscribed source)
AsyncPipe manages its subscription; it does not own and globally complete arbitrary upstream sources.
try it in the quiz →
23.
What is directive composition through hostDirectives intended to share?
mid
1. AA server deployment pipeline
2. BHost behavior across components or directives
3. CAll component templates automatically
Show answer
Answer: B (Host behavior across components or directives)
It composes reusable directive behavior and deliberately exposed inputs or outputs onto a host.
try it in the quiz →
24.
What do pipe arguments after the pipe name supply?
easy
1. AAdditional transform parameters
2. BDependency-injection scopes
3. CComponent selectors
Show answer
Answer: A (Additional transform parameters)
Pipe parameters influence transformation and participate in the relevant pipe update behavior.
try it in the quiz →
25.
During initialization, when does the first ngOnChanges run relative to ngOnInit?
easy
1. ABefore ngOnInit
2. BAlways after ngAfterViewInit
3. COnly after destruction
Show answer
Answer: A (Before ngOnInit)
Angular supplies initial input changes before the initialization hook when applicable.
try it in the quiz →
26.
Why should a constructor not assume bound inputs already contain parent values?
mid
1. AInputs are never assigned
2. BConstructors run only on the server
3. CInput initialization occurs after construction
Show answer
Answer: C (Input initialization occurs after construction)
Use the appropriate input or lifecycle mechanism rather than depending on unavailable bound values.
try it in the quiz →
27.
Which lifecycle hook is traditionally used after the component's view is initialized?
easy
1. AngOnChanges only
2. BngAfterViewInit
3. CngOnDestroy
Show answer
Answer: B (ngAfterViewInit)
View initialization and content projection initialization are distinct lifecycle stages.
try it in the quiz →
28.
What does a content query search?
mid
1. AProjected content supplied to the component
2. BThe component's own private view only
3. CEvery element in the document
Show answer
Answer: A (Projected content supplied to the component)
View queries inspect the component's template; content queries inspect its projected content boundary.
try it in the quiz →
29.
Why can a query result be absent after a conditional block is hidden?
mid
1. AThe injector has been deleted
2. BAngular queries never update
3. CIts target is not currently present
Show answer
Answer: C (Its target is not currently present)
Treat conditional query results as potentially absent and react to their supported update mechanism.
try it in the quiz →
30.
What does TemplateRef represent?
mid
1. AThe root application injector
2. BA template that can instantiate embedded views
3. CA live HTTP response
Show answer
Answer: B (A template that can instantiate embedded views)
TemplateRef describes reusable template content; it is not itself a rendered DOM element.
try it in the quiz →
31.
What is DestroyRef useful for?
mid
1. ARegistering cleanup tied to an Angular destruction scope
2. BForcing every component to reload
3. CMaking an Observable cold
Show answer
Answer: A (Registering cleanup tied to an Angular destruction scope)
Use lifecycle-scoped cleanup for resources; the scope depends on where the dependency is obtained.
try it in the quiz →
32.
When is an after-render callback useful?
mid
1. AMutating all inputs during construction
2. BReplacing server-side authorization
3. CDOM work that must follow Angular rendering
Show answer
Answer: C (DOM work that must follow Angular rendering)
After-render APIs support render-dependent DOM work; check their browser and injection-context requirements.
try it in the quiz →
33.
Why cannot a TypeScript interface alone act as a runtime DI token?
mid
1. AInterfaces are always singleton objects
2. BAngular can inject only strings
3. CInterfaces are erased from JavaScript
Show answer
Answer: C (Interfaces are erased from JavaScript)
Use a runtime token, such as an InjectionToken, when there is no class value to identify the dependency.
try it in the quiz →
34.
Providing a service on a component commonly gives it what scope?
mid
1. AA new instance per method call
2. BAn instance associated with that component's injector
3. CExactly one instance across every browser tab
Show answer
Answer: B (An instance associated with that component's injector)
Component providers can create local service instances shared with consumers resolving through that injector.
try it in the quiz →
35.
What does useExisting establish?
mid
1. AAn alias to an existing provider instance
2. BAn unconditional new instance
3. CA deep copy of a service
Show answer
Answer: A (An alias to an existing provider instance)
Aliasing differs from useClass, which may create a separate instance for the new token.
try it in the quiz →
36.
When is a factory provider useful?
mid
1. AReplacing every template binding
2. BMaking a TypeScript interface exist at runtime
3. CConstructing a dependency from other dependencies or configuration
Show answer
Answer: C (Constructing a dependency from other dependencies or configuration)
Factories express controlled creation logic while participating in dependency injection.
try it in the quiz →
37.
What does a multi provider collect?
mid
1. AOne component per route
2. BMultiple contributions under one token
3. COnly the final provider value
Show answer
Answer: B (Multiple contributions under one token)
A multi token resolves to a collection, enabling extension points such as configured handlers.
try it in the quiz →
38.
Can inject be called from any arbitrary callback at any time?
mid
1. ANo, it needs an injection context or an explicit supported context wrapper
2. BYes, it searches every application globally
3. COnly when the callback is async
Show answer
Answer: A (No, it needs an injection context or an explicit supported context wrapper)
Capture dependencies in a valid context or use the supported mechanism for establishing one.
try it in the quiz →
39.
What does optional injection permit?
easy
1. AA service to ignore all constructor errors
2. BEvery dependency to be global
3. CA missing dependency to resolve without the usual missing-provider error
Show answer
Answer: C (A missing dependency to resolve without the usual missing-provider error)
Optional resolution lets the consumer deliberately handle an absent provider.
try it in the quiz →
40.
What does skipSelf change during dependency lookup?
mid
1. AIt creates a new global instance
2. BIt starts searching above the current injector
3. CIt disables every parent injector
Show answer
Answer: B (It starts searching above the current injector)
Lookup modifiers make injector boundaries explicit; use them when the ownership design requires it.
try it in the quiz →
41.
How do you read a signal's current value in Angular code?
easy
1. ASubscribe to it as an Observable
2. BCall the signal getter
3. CRead its value property universally
Show answer
Answer: B (Call the signal getter)
Signals expose a getter function that also allows reactive consumers to track reads.
try it in the quiz →
42.
Which signal operation computes a new value from the previous value?
easy
1. Aupdate
2. Bsubscribe
3. Cemit
Show answer
Answer: A (update)
A writable signal's update callback derives its next value from the current one.
try it in the quiz →
43.
Can you call set on a computed signal?
mid
1. AYes, on every computed value
2. BOnly inside a template
3. CNo, it is derived and readonly
Show answer
Answer: C (No, it is derived and readonly)
Update the underlying writable sources; computed represents a derivation rather than independent mutable state.
try it in the quiz →
44.
A computed branch does not read a certain signal. Is that signal necessarily tracked for that execution?
mid
1. AOnly if it is a number
2. BNo
3. CYes, all imported signals are tracked
Show answer
Answer: B (No)
Dependencies are based on actual reactive reads and can change when a different branch executes.
try it in the quiz →
45.
What is untracked used for?
mid
1. AAn incidental signal read that should not become a dependency
2. BMaking all state immutable
3. CPreventing every Effect from running
Show answer
Answer: A (An incidental signal read that should not become a dependency)
Use it deliberately for incidental reads, not to conceal a real dependency required for correctness.
try it in the quiz →
46.
Does asReadonly freeze nested objects inside a signal?
mid
1. AYes, recursively
2. BOnly arrays
3. CNo
Show answer
Answer: C (No)
Readonly signal access removes write methods from that view; it does not prevent deep mutation of the stored value.
try it in the quiz →
47.
What distinguishes linkedSignal from an ordinary computed derivation?
hard
1. AIt cannot depend on signals
2. BIt supports writable state linked to a reactive source
3. CIt is always an HTTP subscription
Show answer
Answer: B (It supports writable state linked to a reactive source)
Linked state can be updated directly while resetting or deriving according to source changes.
try it in the quiz →
48.
Why should a resource loader use its provided abort signal for cancellable work?
hard
1. ATo stop obsolete loading when parameters change
2. BTo undo committed database mutations
3. CTo turn all errors into success
Show answer
Answer: A (To stop obsolete loading when parameters change)
Resource cancellation can reduce stale work. It should not be treated as transaction rollback.
try it in the quiz →
49.
A parent mutates a nested field but passes the same object to an OnPush child. Why may the child remain unchanged?
mid
1. ANo new input reference signals that change
2. BOnPush always deep-compares objects
3. COnPush disables all inputs
Show answer
Answer: A (No new input reference signals that change)
Use immutable updates or an appropriate explicit reactive notification rather than relying on deep mutation detection.
try it in the quiz →
50.
What happens when a signal read by an OnPush template changes?
mid
1. AThe signal is ignored because of OnPush
2. BOnly the root component can see it
3. CAngular can mark the consuming view for update
Show answer
Answer: C (Angular can mark the consuming view for update)
Template signal reads participate in Angular's reactive view tracking.
try it in the quiz →
51.
What does markForCheck express?
mid
1. ADeep-freeze all input values
2. BThe view should be checked in an appropriate detection run
3. CImmediately destroy the view
Show answer
Answer: B (The view should be checked in an appropriate detection run)
Marking a view and synchronously running local detection are distinct operations.
try it in the quiz →
52.
What is detectChanges used for?
mid
1. ARunning change detection for the relevant view and children
2. BRegistering a new route
3. CRefreshing every database table
Show answer
Answer: A (Running change detection for the relevant view and children)
It is an explicit detection tool; avoid using it to hide poor state flow without understanding why it is needed.
try it in the quiz →
53.
What does detaching a change detector do?
hard
1. ARemoves all of its DOM immediately
2. BCancels all HTTP requests
3. CRemoves the view from normal detection traversal
Show answer
Answer: C (Removes the view from normal detection traversal)
A detached view can remain visible and may require deliberate local checks or reattachment.
try it in the quiz →
54.
In a zoneless app, which update mechanism can notify Angular of a template change?
mid
1. AEditing a random module variable
2. BUpdating a signal read by the template
3. CChanging any plain field in any timer and assuming automatic detection
Show answer
Answer: B (Updating a signal read by the template)
Zoneless rendering relies on supported Angular notifications, not blanket observation of all async tasks.
try it in the quiz →
55.
In a zone-based app, what is a key role of Zone.js integration?
mid
1. ANotifying Angular about asynchronous task activity
2. BComparing every database record
3. CCompiling templates at runtime only
Show answer
Answer: A (Notifying Angular about asynchronous task activity)
Zone integration helps schedule checks; it does not by itself know which application values changed.
try it in the quiz →
56.
Why is AsyncPipe useful with OnPush components?
mid
1. AIt makes every object deeply immutable
2. BIt prevents every rerender
3. CIt marks the view when subscribed values arrive
Show answer
Answer: C (It marks the view when subscribed values arrive)
AsyncPipe integrates emissions with view checking while managing its subscription lifecycle.
try it in the quiz →
57.
What commonly happens when two consumers subscribe to a cold HTTP Observable?
easy
1. AThey always share one response automatically
2. BNeither request starts
3. CEach subscription starts its own execution
Show answer
Answer: C (Each subscription starts its own execution)
Cold streams defer independent work until subscription unless an explicit sharing mechanism changes that behavior.
try it in the quiz →
58.
What does subscribing to an Observable return?
easy
1. AAn Angular component
2. BA Subscription for managing that subscription
3. CAlways the final emitted value
Show answer
Answer: B (A Subscription for managing that subscription)
The subscription controls teardown; values arrive through the observer callbacks or operators.
try it in the quiz →
59.
What capability does a Subject combine?
mid
1. AObserver input and multicast Observable output
2. BOnly Promise resolution
3. CA readonly signal getter
Show answer
Answer: A (Observer input and multicast Observable output)
A Subject can receive notifications and distribute them to current subscribers.
try it in the quiz →
60.
What distinguishes BehaviorSubject?
mid
1. AIt never emits to new subscribers
2. BIt cannot be observed
3. CIt holds a current value and requires an initial value
Show answer
Answer: C (It holds a current value and requires an initial value)
New subscribers receive the current value; choose an initial representation that makes sense for the state.
try it in the quiz →
61.
What can ReplaySubject provide to a late subscriber?
mid
1. AAutomatic HTTP caching forever
2. BA configured buffer of previous emissions
3. COnly future errors
Show answer
Answer: B (A configured buffer of previous emissions)
Bound the replay buffer or time window deliberately to avoid retaining unnecessary data.
try it in the quiz →
62.
After an Observable sends an error notification, what follows for that subscription?
easy
1. ANo further normal values from that terminated stream
2. BValues continue as usual
3. CIt automatically restarts forever
Show answer
Answer: A (No further normal values from that terminated stream)
Recovery operators can replace a failed stream, but the errored execution itself has terminated.
try it in the quiz →
63.
Does unsubscribing necessarily call the observer's complete callback?
mid
1. AYes, always
2. BOnly for Subjects
3. CNo
Show answer
Answer: C (No)
Unsubscription tears down the subscription; it is distinct from a completion notification from the source.
try it in the quiz →
64.
Why put side-effect creation inside an Observable's subscription logic when laziness is desired?
mid
1. ATo disable teardown
2. BSo work starts with subscription rather than earlier
3. CTo force work at module import
Show answer
Answer: B (So work starts with subscription rather than earlier)
Wrapping an already-started Promise does not retroactively make its underlying operation lazy.
try it in the quiz →
65.
Which flattening operator is often appropriate when only the newest search request should matter?
mid
1. AexhaustMap
2. BswitchMap
3. CconcatMap
Show answer
Answer: B (switchMap)
switchMap unsubscribes from the previous inner stream when a new source value arrives; source cancellation behavior still matters.
try it in the quiz →
66.
Which flattening operator preserves sequential execution of queued inner operations?
mid
1. AconcatMap
2. BswitchMap
3. CexhaustMap
Show answer
Answer: A (concatMap)
concatMap waits for each inner stream to complete. Ensure it completes or later work remains queued.
try it in the quiz →
67.
Which operator ignores new triggers while the current inner operation is active?
mid
1. AmergeMap
2. BconcatMap
3. CexhaustMap
Show answer
Answer: C (exhaustMap)
exhaustMap can suppress repeated triggers during active work; server-side duplicate protection is still necessary.
try it in the quiz →
68.
What can a concurrency argument to mergeMap limit?
hard
1. AOnly the size of strings
2. BThe number of active inner subscriptions
3. CThe total number of source values forever
Show answer
Answer: B (The number of active inner subscriptions)
Concurrency limits active work; it does not by itself guarantee a bounded upstream backlog.
try it in the quiz →
69.
When can combineLatest first emit for multiple sources?
mid
1. AAfter every source has emitted at least once
2. BImmediately even if none has emitted
3. COnly after all sources complete
Show answer
Answer: A (After every source has emitted at least once)
A source without an initial emission can keep the combination waiting; initialize deliberately when required.
try it in the quiz →
70.
What happens if one forkJoin input never completes?
mid
1. AIt emits every millisecond
2. BIt ignores that source
3. CThe combined result does not complete with a final value
Show answer
Answer: C (The combined result does not complete with a final value)
forkJoin waits for completion to combine final values, so ongoing streams require a deliberate completion boundary.
try it in the quiz →
71.
Why put catchError inside a switchMap's request stream for recoverable search errors?
hard
1. ATo prevent cancellation
2. BTo recover one request while keeping future search triggers alive
3. CTo guarantee every server response succeeds
Show answer
Answer: B (To recover one request while keeping future search triggers alive)
Catching at the wrong outer boundary can replace or terminate the entire trigger pipeline rather than one request.
try it in the quiz →read the note →
72.
Why might distinctUntilChanged not suppress equivalent newly created objects by default?
mid
1. AIt compares references with its default equality behavior
2. BIt recursively compares every field
3. CIt ignores all objects
Show answer
Answer: A (It compares references with its default equality behavior)
Provide a meaningful comparator or project a stable key when value-based distinctness is needed.
try it in the quiz →
73.
What happens when toSignal is created from an Observable?
mid
1. AIt subscribes to obtain values
2. BIt waits until every template first clicks
3. CIt changes the source into a Subject
Show answer
Answer: A (It subscribes to obtain values)
Create it once in an appropriate scope rather than repeatedly constructing subscriptions during template evaluation.
try it in the quiz →
74.
Why might toSignal need an initial value?
mid
1. ASignals cannot hold asynchronous results
2. BEvery Observable starts with zero
3. CThe Observable may not emit synchronously
Show answer
Answer: C (The Observable may not emit synchronously)
Before the first emission, the signal needs a defined initial representation or a contract such as requireSync when valid.
try it in the quiz →
75.
When is toSignal's requireSync appropriate?
hard
1. AWhen you want to make async work block
2. BWhen the source is guaranteed to emit immediately on subscription
3. CFor every HTTP request
Show answer
Answer: B (When the source is guaranteed to emit immediately on subscription)
requireSync asserts source behavior; it does not turn asynchronous work into synchronous execution.
try it in the quiz →
76.
What does takeUntilDestroyed connect to subscription completion?
mid
1. AAn Angular destruction scope
2. BThe next browser mouse move
3. COnly the first emitted value
Show answer
Answer: A (An Angular destruction scope)
It provides lifecycle-bound teardown when used with the correct injection context or supplied DestroyRef.
try it in the quiz →
77.
When does finalize run for its subscription scope?
mid
1. AOnly on success
2. BBefore every emitted value
3. COn completion, error or unsubscription
Show answer
Answer: C (On completion, error or unsubscription)
Finalize is useful for teardown, but shared flags can still be wrong if several overlapping subscriptions modify them.
try it in the quiz →
78.
What does take(1) do after receiving its first value?
easy
1. ARepeats the value forever
2. BCompletes that derived subscription
3. CCompletes the original Subject for everyone
Show answer
Answer: B (Completes that derived subscription)
Operators usually affect the subscribed pipeline, not the global lifetime of an external source.
try it in the quiz →
79.
Why avoid uncontrolled subscribe-inside-subscribe chains?
mid
1. ATeardown and ordering become difficult to coordinate
2. BRxJS forbids nested functions
3. CThey always run synchronously
Show answer
Answer: A (Teardown and ordering become difficult to coordinate)
Flattening operators make cancellation, sequencing and errors part of a composed pipeline.
try it in the quiz →
80.
What must you decide when using shareReplay for a long-lived source?
hard
1. AOnly the variable's capitalization
2. BWhether CSS is enabled
3. CBuffering and subscriber-lifetime behavior
Show answer
Answer: C (Buffering and subscriber-lifetime behavior)
Sharing can retain values or an upstream subscription. Choose buffer and ref-count semantics deliberately.
try it in the quiz →
81.
Which reactive-forms structure groups named controls?
easy
1. AFormArray only
2. BRouterOutlet
3. CFormGroup
Show answer
Answer: C (FormGroup)
FormGroup organizes named fields; FormArray handles a collection indexed by position.
try it in the quiz →read the note →
82.
Which structure fits a dynamic list of similar form entries?
easy
1. AAn HTTP interceptor
2. BFormArray
3. CA single string FormControl
Show answer
Answer: B (FormArray)
A FormArray can add and remove child controls while tracking their aggregate status.
try it in the quiz →
83.
How does setValue differ from patchValue on a FormGroup?
mid
1. AsetValue requires the group's expected shape
2. BpatchValue always requires more fields
3. CsetValue silently ignores all missing controls
Show answer
Answer: A (setValue requires the group's expected shape)
patchValue supports partial updates, whereas setValue checks the complete group structure.
try it in the quiz →
84.
For an enabled FormGroup, how can you include disabled controls in the retrieved data?
mid
1. ARead only value and assume all controls are included
2. BEnable strictTemplates
3. CUse getRawValue
Show answer
Answer: C (Use getRawValue)
Disabled controls are normally excluded from an enabled group's aggregate value; raw values include them.
try it in the quiz →
85.
Why consider nonNullable when defining a FormControl?
mid
1. AIt prevents empty strings
2. BIt changes nullability and reset-to-initial-value behavior
3. CIt makes all API responses valid
Show answer
Answer: B (It changes nullability and reset-to-initial-value behavior)
Non-nullable controls reset to their initial value instead of null, but validation remains a separate concern.
try it in the quiz →read the note →
86.
What does dirty indicate for a form control?
easy
1. AThe user changed its value through the UI
2. BIt has necessarily failed validation
3. CIt has necessarily lost focus
Show answer
Answer: A (The user changed its value through the UI)
Touched relates to blur or explicit marking; dirty and validity express different aspects of form state.
try it in the quiz →read the note →
87.
What can updateOn blur change?
mid
1. AThe server's transaction isolation
2. BThe component's selector
3. CWhen control value updates and validation are triggered from the view
Show answer
Answer: C (When control value updates and validation are triggered from the view)
Update timing can reduce validation churn; choose it based on feedback expectations.
try it in the quiz →
88.
Where should a password-confirmation rule comparing two fields generally live?
mid
1. AIn a CSS rule
2. BA validator at their shared group boundary
3. COnly on an unrelated component
Show answer
Answer: B (A validator at their shared group boundary)
A group validator can inspect both controls and return a structured validation error.
try it in the quiz →read the note →
89.
What is ControlValueAccessor.writeValue responsible for?
mid
1. ASubmitting the parent form
2. BReflecting a model value in the custom control's view
3. CReporting every user change back immediately
Show answer
Answer: B (Reflecting a model value in the custom control's view)
Model-to-view updates should not recursively invoke the registered change callback as though they were user edits.
try it in the quiz →
90.
What does registerOnChange provide to a custom control?
mid
1. AA callback to report user-driven value changes
2. BA route navigation callback
3. CA server validator
Show answer
Answer: A (A callback to report user-driven value changes)
Store the callback and call it for appropriate UI changes, not indiscriminately during model writes.
try it in the quiz →
91.
When should a custom control invoke its registered touched callback?
mid
1. AOn every programmatic writeValue
2. BOnly after a successful HTTP request
3. CWhen the interaction reaches its defined touched or blur boundary
Show answer
Answer: C (When the interaction reaches its defined touched or blur boundary)
Touched describes interaction state and should behave consistently with the control's focus model.
try it in the quiz →
92.
What does setDisabledState allow a custom control to implement?
mid
1. AAutomatic role authorization
2. BThe form model's disabled state in its UI
3. CPermanent removal of all validators
Show answer
Answer: B (The form model's disabled state in its UI)
Propagate disabling to relevant interactions and presentation rather than merely changing a color.
try it in the quiz →
93.
Why does an ngModel control inside a template-driven form normally need a name?
easy
1. ATo register under a key in the parent form
2. BTo create a route
3. CTo inject HttpClient
Show answer
Answer: A (To register under a key in the parent form)
Alternatively a deliberately standalone ngModel control can opt out of parent registration.
try it in the quiz →
94.
Which Angular module provides ngModel for template-driven forms?
easy
1. AReactiveFormsModule alone
2. BHttpClientModule
3. CFormsModule
Show answer
Answer: C (FormsModule)
Import the relevant forms dependencies into the component or module using the template.
try it in the quiz →
95.
What is a central idea of Angular Signal Forms?
mid
1. AReplacing server validation with signals
2. BA signal-backed data model with a corresponding form field tree
3. COnly mutable DOM values with no model
Show answer
Answer: B (A signal-backed data model with a corresponding form field tree)
Signal Forms connect model state and form behavior through signal-based APIs; check availability in the project's Angular version.
try it in the quiz →
96.
Why avoid casually combining ngModel and reactive-form ownership on the same control?
mid
1. AThey can create conflicting value ownership
2. BThey guarantee twice the validation accuracy
3. CThey are required for all custom controls
Show answer
Answer: A (They can create conflicting value ownership)
Choose one clear form model for the control and integrate through the supported contract.
try it in the quiz →
97.
Why put a wildcard route after specific routes?
easy
1. ARoute matching order matters
2. BWildcards are always ignored
3. CSpecific routes require no components
Show answer
Answer: A (Route matching order matters)
A broad earlier match can capture URLs intended for more specific routes.
try it in the quiz →
98.
Why commonly use pathMatch full for an empty-path redirect?
mid
1. ATo disable all nested routing
2. BTo force a server reload
3. CTo avoid matching every URL by its empty prefix
Show answer
Answer: C (To avoid matching every URL by its empty prefix)
An empty path is a prefix of many URLs, so prefix matching can produce unwanted redirects.
try it in the quiz →
99.
What does loadComponent enable in a route definition?
mid
1. AAutomatic database sharding
2. BLazy loading a routed component
3. CEager creation of every service
Show answer
Answer: B (Lazy loading a routed component)
A dynamic loading boundary can reduce initial route code, provided dependencies are not eagerly imported elsewhere.
try it in the quiz →
100.
When can CanMatch be useful?
mid
1. AControlling whether a route configuration is considered a match
2. BSanitizing all API responses
3. CReplacing backend authorization
Show answer
Answer: A (Controlling whether a route configuration is considered a match)
A false result can allow alternative route matching; it is not a server security boundary.
try it in the quiz →
101.
How should a guard express a redirect through the router's supported contract?
mid
1. AReturn true and immediately perform unrelated navigation
2. BModify window.location in every case
3. CReturn a UrlTree or supported redirect result
Show answer
Answer: C (Return a UrlTree or supported redirect result)
Returning a redirect lets the router coordinate navigation rather than racing a separate side effect.
try it in the quiz →
102.
Why observe route parameters instead of reading a snapshot once when a component can be reused?
mid
1. AThe route always destroys the app
2. BParameters may change without a new component instance
3. CSnapshots cannot contain strings
Show answer
Answer: B (Parameters may change without a new component instance)
Use reactive parameter handling when same-route navigation changes the represented resource.
try it in the quiz →
103.
What trade-off comes with blocking route resolution on data?
mid
1. ANavigation can wait for the data or its failure
2. BAll loading UI becomes unnecessary
3. CRequests cannot fail
Show answer
Answer: A (Navigation can wait for the data or its failure)
Resolve only what must be ready before activation and provide suitable navigation feedback.
try it in the quiz →
104.
Why deliberately choose query-parameter merge or replacement behavior?
mid
1. AQuery strings are always immutable
2. BEvery query parameter is a secret
3. CUnrelated filters may otherwise be dropped or stale ones retained
Show answer
Answer: C (Unrelated filters may otherwise be dropped or stale ones retained)
Treat URL updates as state transitions with an explicit policy rather than accidental accumulation.
try it in the quiz →
105.
When does a normal HttpClient Observable send its request?
easy
1. AWhen the service class file is parsed
2. BOnly after app destruction
3. CWhen subscribed
Show answer
Answer: C (When subscribed)
HttpClient Observables are normally cold; multiple subscriptions can cause multiple requests unless shared deliberately.
try it in the quiz →read the note →
106.
How should an interceptor change an HttpRequest's headers?
mid
1. AModify the component's selector
2. BClone the request with the changes
3. CAssign into immutable headers and assume mutation
Show answer
Answer: B (Clone the request with the changes)
HttpRequest and HttpHeaders use immutable update APIs; keep and forward the returned value.
try it in the quiz →
107.
Why does interceptor order matter?
mid
1. AEach interceptor wraps the next stage of request and response handling
2. BAll interceptors execute in random order
3. COnly the first interceptor ever runs
Show answer
Answer: A (Each interceptor wraps the next stage of request and response handling)
Ordering affects authentication, retries, logging and transformations in the composed chain.
try it in the quiz →
108.
What is HttpContext useful for?
mid
1. AA global React context
2. BAutomatically encrypting the body
3. CTyped request metadata consumed by interceptors without adding wire headers
Show answer
Answer: C (Typed request metadata consumed by interceptors without adding wire headers)
Context can carry client-side handling flags, such as a cache policy, separately from data sent to the server.
try it in the quiz →
109.
Does http.get<User>(url) validate the response shape at runtime?
mid
1. AOnly if strictTemplates is enabled
2. BNo
3. CYes, every field is checked
Show answer
Answer: B (No)
The generic is a compile-time expectation. Validate untrusted payloads separately where necessary.
try it in the quiz →
110.
Why avoid blindly retrying every failed POST?
hard
1. AThe server may already have committed its side effect
2. BPOST is always read-only
3. CHttpClient prevents duplicate requests automatically
Show answer
Answer: A (The server may already have committed its side effect)
Use operation-specific retry policy and server idempotency where required, especially after ambiguous timeouts.
try it in the quiz →read the note →
111.
Calling params.set without retaining the returned HttpParams can cause what?
mid
1. AEvery previous parameter is deleted globally
2. BThe request becomes a WebSocket
3. CThe intended parameter is not applied
Show answer
Answer: C (The intended parameter is not applied)
HttpParams is immutable; assign or chain the returned instance.
try it in the quiz →
112.
What can an HttpClient error status of zero indicate?
mid
1. AProof the user is unauthorized
2. BA network-level failure or similar browser-side request failure
3. CA normal successful JSON response
Show answer
Answer: B (A network-level failure or similar browser-side request failure)
Inspect error context; zero does not uniquely identify one server status or one root cause.
try it in the quiz →
113.
Where does a standalone component normally go in TestBed configuration?
easy
1. AOnly providers
2. Bimports
3. Cdeclarations as though it were non-standalone
Show answer
Answer: B (imports)
Standalone components are imported; NgModule-declared components follow a different declaration model.
try it in the quiz →
114.
What does a ComponentFixture provide?
easy
1. AAccess to a component instance and its rendered test view
2. BA production database
3. CA compiled mobile app
Show answer
Answer: A (Access to a component instance and its rendered test view)
Fixtures coordinate component testing and allow inspection of the host view and lifecycle.
try it in the quiz →
115.
What does HttpTestingController help tests do?
mid
1. ASend real production mutations faster
2. BReplace every service with strings
3. CExpect requests and supply controlled responses
Show answer
Answer: C (Expect requests and supply controlled responses)
The HTTP testing backend allows deterministic success and failure scenarios without real network traffic.
try it in the quiz →
116.
Why verify outstanding HTTP expectations during test cleanup?
mid
1. ATo compile templates twice
2. BTo detect unexpected or unhandled requests
3. CTo create more requests
Show answer
Answer: B (To detect unexpected or unhandled requests)
Verification catches requests the test failed to account for, subject to the chosen cancellation policy.
try it in the quiz →
117.
Why dispatch an input event after changing a native input's value in a test?
mid
1. ATo exercise Angular's view-to-model event path
2. BTo force all server validators to pass
3. CTo avoid any change detection
Show answer
Answer: A (To exercise Angular's view-to-model event path)
Setting the DOM property alone may not notify form bindings or event handlers.
try it in the quiz →
118.
When should provider overrides normally be configured?
mid
1. AAfter the application has been destroyed
2. BOnly in a template
3. CBefore the tested instance is created
Show answer
Answer: C (Before the tested instance is created)
Configure the dependency graph before instantiation so the object under test receives the intended dependency.
try it in the quiz →
119.
What is a benefit of a component harness?
mid
1. AIt always uses a real browser account
2. BTests interact through a stable behavior API instead of internal markup
3. CIt removes the need for assertions
Show answer
Answer: B (Tests interact through a stable behavior API instead of internal markup)
Harnesses reduce coupling to private DOM structure, especially for complex shared components.
try it in the quiz →
120.
Why check test-runner compatibility before relying on fakeAsync?
hard
1. ATimer and Zone.js support differ between test environments
2. BAll test runners use identical time emulation
3. CfakeAsync validates backend data
Show answer
Answer: A (Timer and Zone.js support differ between test environments)
Use timing tools supported by the configured runner and Angular setup rather than copying assumptions across projects.
try it in the quiz →
121.
Why is localStorage unavailable during normal Angular server rendering?
easy
1. AIt is a browser API absent from the server environment
2. BAngular permanently disables it
3. CIt exists only inside forms
Show answer
Answer: A (It is a browser API absent from the server environment)
Use a browser-only boundary and provide a sensible server-rendered initial state.
try it in the quiz →
122.
What is hydration intended to do?
easy
1. ADiscard all HTML unconditionally
2. BAuthenticate all users automatically
3. CReuse server-rendered DOM while activating the client app
Show answer
Answer: C (Reuse server-rendered DOM while activating the client app)
Hydration avoids unnecessary recreation when server and client structures agree.
try it in the quiz →
123.
Why can direct DOM insertion before hydration be problematic?
mid
1. AIt disables only CSS
2. BIt changes the structure Angular expects
3. CIt makes HTML automatically safer
Show answer
Answer: B (It changes the structure Angular expects)
Keep server and initial client DOM compatible or use a carefully defined integration boundary.
try it in the quiz →
124.
What can an HTTP transfer cache reduce?
mid
1. ADuplicate initial reads between server rendering and the client
2. BEvery future API request
3. CServer permission checks
Show answer
Answer: A (Duplicate initial reads between server rendering and the client)
Transferred data can bridge the initial render, but eligibility and sensitive-data policy must be configured appropriately.
try it in the quiz →
125.
What is the risk of a process-global cache keyed only by a private resource's numeric ID?
hard
1. AThe cache can only store CSS
2. BEvery request has an isolated global object
3. CData may be reused across users or tenants
Show answer
Answer: C (Data may be reused across users or tenants)
Scope private cache entries by authorization context or avoid sharing them; a numeric ID alone may not be unique or safe.
try it in the quiz →
126.
What does event replay help with during hydration?
mid
1. AMaking all third-party events serializable
2. BReplaying supported interactions captured before listeners are ready
3. CUndoing server mutations
Show answer
Answer: B (Replaying supported interactions captured before listeners are ready)
Event replay improves early interaction handling, but does not replace testing the actual hydration flow.
try it in the quiz →
127.
Which content is especially suitable for prerendering?
mid
1. APublic pages reusable until the next content build
2. BEvery user's private bank balance
3. CData that must change on every keystroke
Show answer
Answer: A (Public pages reusable until the next content build)
Prerendering serves prebuilt HTML; highly personalized or immediately fresh data needs another strategy.
try it in the quiz →
128.
Why can random IDs generated separately on server and client break hydration?
mid
1. AAngular cannot render any ID
2. BRandomness disables HTTP
3. CThe initial markup differs
Show answer
Answer: C (The initial markup differs)
Use consistent initial data and identity rather than independently generating mismatching values.
try it in the quiz →
129.
For direct component dependencies to be deferred by @defer, what condition is important?
mid
1. AThey must all be NgModule declarations
2. BThey must be imported in every eager template
3. CThey must meet Angular's standalone and usage eligibility rules
Show answer
Answer: C (They must meet Angular's standalone and usage eligibility rules)
Deferral has dependency constraints; references outside the block in the same file can prevent the expected split.
try it in the quiz →
130.
What does @placeholder provide?
easy
1. AThe final HTTP response
2. BContent displayed before deferred content is triggered
3. CA server-side authorization guard
Show answer
Answer: B (Content displayed before deferred content is triggered)
A placeholder should occupy appropriate space and communicate the pending region when useful.
try it in the quiz →
131.
How is a defer loading block different from its placeholder?
easy
1. AIt represents the dependency-loading phase after triggering
2. BIt is always the full application shell
3. CIt only handles validation errors
Show answer
Answer: A (It represents the dependency-loading phase after triggering)
Loading and placeholder blocks cover different phases; timing options can avoid distracting flashes.
try it in the quiz →
132.
What should a defer error block communicate?
mid
1. AThe entire account has been deleted
2. BEvery input is invalid
3. CThe deferred content could not be loaded
Show answer
Answer: C (The deferred content could not be loaded)
Offer a meaningful failure experience rather than an endless spinner; recovery may also involve deployment asset policy.
try it in the quiz →
133.
How does prefetch differ from rendering a deferred block?
mid
1. AIt replaces the placeholder with an error
2. BIt can fetch dependencies before the display trigger
3. CIt must immediately show the component
Show answer
Answer: B (It can fetch dependencies before the display trigger)
Separate fetch timing from reveal timing to improve responsiveness without showing content early.
try it in the quiz →
134.
What reduces layout shift when deferred content appears?
mid
1. AA suitably sized placeholder or reserved space
2. BA new random tracking key
3. CRemoving all dimensions
Show answer
Answer: A (A suitably sized placeholder or reserved space)
Reserve likely geometry while accounting for responsive sizes instead of letting large content unexpectedly push the page.
try it in the quiz →
135.
What does virtual scrolling primarily reduce?
mid
1. AThe total number of records stored by every backend
2. BThe need for accessibility testing
3. CThe number of rendered list items
Show answer
Answer: C (The number of rendered list items)
Rendering a window reduces DOM work, but data fetching, row sizing and focus still need design.
try it in the quiz →
136.
When can a Web Worker help an Angular app?
hard
1. AFor replacing every HTTP request
2. BFor substantial computation separable from direct DOM access
3. CFor directly editing the component's DOM in the worker
Show answer
Answer: B (For substantial computation separable from direct DOM access)
Workers run off the main thread but require a message boundary and cannot directly manipulate the DOM.
try it in the quiz →
137.
What does ordinary Angular text interpolation do with HTML-like user text?
easy
1. ACompiles it as a new template
2. BTreats it as text rather than executable markup
3. CAlways runs embedded scripts
Show answer
Answer: B (Treats it as text rather than executable markup)
Text interpolation is distinct from explicitly assigning HTML or dynamically compiling templates.
try it in the quiz →
138.
What does bypassSecurityTrustHtml mean?
mid
1. AThe application asserts the value is trusted and bypasses that protection
2. BAngular has verified the content is harmless
3. CThe value is encrypted
Show answer
Answer: A (The application asserts the value is trusted and bypasses that protection)
Do not apply trust-bypass APIs to untrusted input merely to silence sanitization behavior.
try it in the quiz →
139.
Why does a resource URL require particular care?
mid
1. AIt is always just a plain label
2. BIt cannot affect application security
3. CIt can identify executable or active content
Show answer
Answer: C (It can identify executable or active content)
Security depends on the context of a value, not simply whether it is a string.
try it in the quiz →
140.
Why should untrusted input never become an Angular template source?
hard
1. AAOT automatically sanitizes arbitrary dynamic source
2. BTemplate execution can expose application capabilities
3. CTemplates are always inert text
Show answer
Answer: B (Template execution can expose application capabilities)
Treat templates as executable application code and keep user content at data boundaries.
try it in the quiz →
141.
A route guard hides an admin page. What must the API still do?
easy
1. AAuthorize every protected operation
2. BTrust that the page could not be opened
3. CCheck only the CSS class
Show answer
Answer: A (Authorize every protected operation)
Attackers can call APIs independently of Angular's router and visible controls.
try it in the quiz →
142.
Why should an auth interceptor check request destinations before attaching credentials?
mid
1. ATo increase image quality
2. BBecause headers cannot be cloned
3. CTo avoid sending them to unintended origins
Show answer
Answer: C (To avoid sending them to unintended origins)
Credential forwarding should follow a deliberate destination policy, especially with third-party URLs.
try it in the quiz →
143.
What is the purpose of a coordinated XSRF token mechanism?
mid
1. APrevent every XSS vulnerability
2. BHelp the server reject forged cross-site requests
3. CValidate every JSON field's type
Show answer
Answer: B (Help the server reject forged cross-site requests)
The client and server must agree on the protection; it does not replace authentication or input validation.
try it in the quiz →
144.
What can Content Security Policy add to an Angular deployment?
mid
1. AA browser-enforced restriction on allowed content execution and loading
2. BA replacement for all sanitization
3. CAutomatic correctness of every template
Show answer
Answer: A (A browser-enforced restriction on allowed content execution and loading)
CSP is a defense-in-depth layer that must be configured and tested with the application's resource needs.
try it in the quiz →
145.
What is a focus trap used for in a modal?
mid
1. AKeeping keyboard focus within the active modal region
2. BPreventing all mouse movement
3. CAuthorizing the dialog action
Show answer
Answer: A (Keeping keyboard focus within the active modal region)
A trap is one part of modal behavior; labeling, initial focus, escape handling and restoration still matter.
try it in the quiz →
146.
What does a live-announcement utility help provide?
mid
1. AA visual animation only
2. BAutomatic translation of all messages
3. CAssistive-technology feedback for dynamic status changes
Show answer
Answer: C (Assistive-technology feedback for dynamic status changes)
Announcements should be meaningful and not excessively interruptive.
try it in the quiz →
147.
What problem does the CDK overlay help solve?
mid
1. AValidating API permissions
2. BPositioning floating UI outside normal layout constraints
3. CReplacing every route
Show answer
Answer: B (Positioning floating UI outside normal layout constraints)
Overlay infrastructure supports floating panels, but the component must still implement its interaction semantics.
try it in the quiz →
148.
Why use a native button for an action where possible?
easy
1. AIt supplies keyboard and semantic behavior
2. BIt forbids click handlers
3. CIt always submits to the server
Show answer
Answer: A (It supplies keyboard and semantic behavior)
Use type button when submission is not intended; native semantics reduce custom interaction code.
try it in the quiz →
149.
After closing a dialog, where should focus generally return?
mid
1. AAlways the top of the document
2. BAn invisible disabled field
3. CA sensible trigger or next logical location
Show answer
Answer: C (A sensible trigger or next logical location)
Focus restoration preserves user orientation, especially for keyboard and screen-reader users.
try it in the quiz →
150.
What does an icon-only Angular Material button still need?
easy
1. AA service provider named icon
2. BA meaningful accessible name
3. COnly a color
Show answer
Answer: B (A meaningful accessible name)
A component library cannot infer the intent of every icon; supply a label describing the action.
try it in the quiz →
151.
What should a drag-and-drop interface consider for non-pointer users?
mid
1. AAn equivalent keyboard-accessible operation
2. BOnly larger drag shadows
3. CDisabling focus outlines
Show answer
Answer: A (An equivalent keyboard-accessible operation)
Dragging cannot be the only way to perform an essential operation.
try it in the quiz →
152.
What should an accessible sortable table expose?
mid
1. AOnly an arrow's color
2. BA different component key each time
3. CHeader semantics and the current sort state
Show answer
Answer: C (Header semantics and the current sort state)
Users need to identify sortable columns and the applied ordering without relying solely on visual styling.
try it in the quiz →
153.
What does strictTemplates improve?
mid
1. ARuntime validation of API JSON
2. BAutomatic browser permission checks
3. CCompile-time checking of template bindings and types
Show answer
Answer: C (Compile-time checking of template bindings and types)
Template checking catches mismatched inputs and expression types, but external data still needs runtime validation.
try it in the quiz →
154.
Does a TypeScript interface remain available for runtime instanceof checks?
easy
1. AOnly inside Angular templates
2. BNo
3. CYes, as a constructor
Show answer
Answer: B (No)
Interfaces are erased; use actual runtime values or explicit validation when needed.
try it in the quiz →
155.
What are Angular build budgets useful for?
mid
1. ADetecting output size beyond configured limits
2. BLimiting a user's API permissions
3. CAllocating database rows
Show answer
Answer: A (Detecting output size beyond configured limits)
Budgets make bundle growth visible in builds, but do not explain the cause without further analysis.
try it in the quiz →
156.
Why inspect build configuration rather than assuming every build is production-optimized?
mid
1. AAngular never supports optimization
2. BAll builds produce identical artifacts
3. COptimization and replacement settings depend on configuration
Show answer
Answer: C (Optimization and replacement settings depend on configuration)
Use the intended configuration and inspect actual artifacts before making performance claims.
try it in the quiz →
157.
What is a security limit of environment file replacement?
mid
1. AOnly developers can read the bundle
2. BValues included in client bundles are not secrets
3. CReplaced values are automatically encrypted
Show answer
Answer: B (Values included in client bundles are not secrets)
Keep private keys and credentials on the server regardless of environment file names.
try it in the quiz →
158.
What does ahead-of-time template compilation do?
easy
1. ACompiles templates during the build rather than waiting for runtime compilation
2. BRuns every user interaction during build
3. CReplaces backend validation
Show answer
Answer: A (Compiles templates during the build rather than waiting for runtime compilation)
AOT can catch template issues earlier and reduce runtime compilation requirements.
try it in the quiz →
159.
Why configure source-map publication deliberately?
mid
1. AThey are required for CSS colors
2. BThey prevent all errors
3. CThey aid debugging but can reveal source details
Show answer
Answer: C (They aid debugging but can reveal source details)
Choose public, hidden or monitoring-upload workflows according to the deployment's requirements.
try it in the quiz →
160.
What does ng update help coordinate?
mid
1. AAutomatic rewrite of every third-party package
2. BDependency updates and available migration transformations
3. CGuaranteed removal of all application bugs
Show answer
Answer: B (Dependency updates and available migration transformations)
Migration tools assist upgrades, but application-specific behavior and compatibility still require testing.
try it in the quiz →
161.
What should determine whether a state service is root-scoped or feature-scoped?
mid
1. AWhether it imports an array
2. BThe intended ownership and lifetime of the state
3. CThe length of its class name
Show answer
Answer: B (The intended ownership and lifetime of the state)
Provider scope determines sharing and lifetime; local drafts need not become application-wide singletons.
try it in the quiz →
162.
What belongs in an NgRx reducer?
mid
1. AA pure state transition
2. BAn HTTP subscription
3. CDirect DOM manipulation
Show answer
Answer: A (A pure state transition)
Reducers compute next state; side-effect orchestration belongs in effects or other appropriate boundaries.
try it in the quiz →
163.
What is an NgRx effect commonly responsible for?
mid
1. AMutating the store object directly
2. BRendering HTML templates
3. CReacting to actions with external work and resulting actions
Show answer
Answer: C (Reacting to actions with external work and resulting actions)
Effects coordinate asynchronous or external operations while reducers remain pure.
try it in the quiz →
164.
What is a selector useful for?
mid
1. AChanging CSS encapsulation
2. BDeriving a focused view of state
3. CAuthorizing every server request
Show answer
Answer: B (Deriving a focused view of state)
Selectors centralize read logic and may memoize derivations; they still depend on correct immutable updates.
try it in the quiz →
165.
Why normalize a large record collection by ID?
mid
1. ATo update and reference entities without duplicating whole records
2. BTo eliminate every array in the app
3. CTo make all network requests synchronous
Show answer
Answer: A (To update and reference entities without duplicating whole records)
Normalized state can reduce inconsistent duplicate copies; preserve separate order or query membership where needed.
try it in the quiz →
166.
Which action name best expresses a meaningful domain event?
mid
1. ASet everything
2. BDo stuff
3. COrder submitted
Show answer
Answer: C (Order submitted)
Domain events clarify intent and help reason about effects, reducers and observable outcomes.
try it in the quiz →
167.
Where should a tooltip's open state usually start?
easy
1. AIn every route parameter
2. BLocally near the owning interaction
3. CIn a global persisted store by default
Show answer
Answer: B (Locally near the owning interaction)
Local ephemeral interaction state generally does not need broad ownership or persistence.
try it in the quiz →
168.
What should be decided before adopting a signal-based store abstraction?
mid
1. AOwnership, update operations and persistence requirements
2. BOnly how short the import statement is
3. CWhether every value is a number
Show answer
Answer: A (Ownership, update operations and persistence requirements)
A store library can structure state, but it cannot decide domain boundaries or lifecycle policy for the application.
try it in the quiz →
169.
What does emulated view encapsulation primarily use?
mid
1. AGenerated attributes and rewritten CSS selectors
2. BA ShadowRoot for every component
3. CA separate browser process
Show answer
Answer: A (Generated attributes and rewritten CSS selectors)
Emulated scoping approximates component style isolation without native Shadow DOM; global styles can still matter.
try it in the quiz →
170.
Which encapsulation mode uses native Shadow DOM?
mid
1. ANone
2. BEmulated
3. CShadowDom
Show answer
Answer: C (ShadowDom)
Native shadow boundaries have different styling and integration behavior from Angular's emulated scoping.
try it in the quiz →
171.
What happens with ViewEncapsulation.None?
easy
1. AOnly inline styles work
2. BComponent styles are not scoped by Angular
3. CAll CSS is removed
Show answer
Answer: B (Component styles are not scoped by Angular)
Unscoped selectors can affect other parts of the application, so use them deliberately.
try it in the quiz →
172.
What does a host selector let component styles target?
mid
1. AThe component's host element
2. BEvery service instance
3. COnly projected text nodes
Show answer
Answer: A (The component's host element)
Host styling applies to the element representing the component, distinct from its internal template elements.
try it in the quiz →
173.
What does LOCALE_ID influence in Angular?
mid
1. AThe current user's authorization level
2. BThe number of router outlets
3. CLocale-dependent formatting behavior
Show answer
Answer: C (Locale-dependent formatting behavior)
Locale configuration informs formatting; translated messages and time-zone policies also need explicit handling.
try it in the quiz →
174.
What do ICU message forms help express?
mid
1. AComponent provider scopes
2. BPlural and selection-dependent translations
3. CDatabase access rules
Show answer
Answer: B (Plural and selection-dependent translations)
Language-sensitive grammar should not be assembled from English-specific fragments.
try it in the quiz →
175.
Why extract marked translation messages?
mid
1. ATo provide structured messages for translation workflows
2. BTo delete all original text
3. CTo convert components to services
Show answer
Answer: A (To provide structured messages for translation workflows)
Extraction separates translatable content from implementation while preserving message context and placeholders.
try it in the quiz →
176.
What should animated entering and leaving UI respect?
mid
1. AOnly the developer's preferred speed
2. BA requirement that every transition last two seconds
3. CReduced-motion preferences and focus continuity
Show answer
Answer: C (Reduced-motion preferences and focus continuity)
Animation should not make important state changes inaccessible or disrupt keyboard interaction.
try it in the quiz →
177.
What can ViewContainerRef.createComponent do?
mid
1. ARegister a database entity
2. BCompile arbitrary untrusted templates safely
3. CInstantiate a component at a managed view-container location
Show answer
Answer: C (Instantiate a component at a managed view-container location)
Dynamic creation uses component definitions and a managed view boundary; it is not a license to execute user templates.
try it in the quiz →
178.
Why use a supported ComponentRef input-setting API for a dynamically created component?
mid
1. AIt skips all lifecycle handling
2. BIt participates in Angular's input update behavior
3. CIt makes every field private
Show answer
Answer: B (It participates in Angular's input update behavior)
Direct arbitrary property assignment may bypass expected input change handling and notification semantics.
try it in the quiz →
179.
What is NgComponentOutlet used for?
mid
1. ADeclarative rendering of a chosen component type
2. BDisplaying only route query strings
3. CCreating an HTTP interceptor
Show answer
Answer: A (Declarative rendering of a chosen component type)
It provides a template-level dynamic component outlet with supported input and injector options.
try it in the quiz →
180.
How does NgTemplateOutlet differ from a component outlet?
mid
1. AIt always creates a new application
2. BIt cannot receive context values
3. CIt instantiates a TemplateRef with context
Show answer
Answer: C (It instantiates a TemplateRef with context)
Template outlets reuse template fragments rather than selecting a component class.
try it in the quiz →
181.
What must custom dynamic-view code handle when the view is no longer needed?
mid
1. AKeeping all subscriptions alive
2. BDestroying or removing the managed view and resources
3. COnly hiding it with opacity
Show answer
Answer: B (Destroying or removing the managed view and resources)
View lifetime should match actual usage so components, listeners and providers do not accumulate.
try it in the quiz →
182.
What do Angular Elements help package?
mid
1. AAngular components as custom elements
2. BSQL rows as TypeScript interfaces
3. CEvery application as a native mobile binary
Show answer
Answer: A (Angular components as custom elements)
Custom elements enable integration through web-platform element APIs, with lifecycle and framework-runtime considerations.
try it in the quiz →
183.
What can an Angular service worker provide when configured?
mid
1. AAutomatic correctness of offline mutations
2. BUnlimited secret storage
3. CCaching and offline behavior under a defined policy
Show answer
Answer: C (Caching and offline behavior under a defined policy)
Offline reads and asset caching differ from synchronizing user writes, which needs explicit application design.
try it in the quiz →
184.
Why avoid activating a new application version blindly during unsaved work?
mid
1. AA reload always saves forms automatically
2. BOld loaded code and new assets may be incompatible and work can be lost
3. CService workers never change assets
Show answer
Answer: B (Old loaded code and new assets may be incompatible and work can be lost)
Coordinate update prompts and reload behavior with compatibility and draft preservation.
try it in the quiz →
185.
In an NgModule-based feature, what belongs in declarations?
easy
1. AStandalone components that should be imported instead
2. BIts non-standalone components, directives and pipes
3. CAll services and HTTP URLs
Show answer
Answer: B (Its non-standalone components, directives and pipes)
Declaration ownership applies to non-standalone template types; standalone dependencies are imported.
try it in the quiz →
186.
What does an NgModule's exports make available to importing modules?
easy
1. ASelected template declarations or re-exported modules
2. BEvery private TypeScript variable
3. CAll browser cookies
Show answer
Answer: A (Selected template declarations or re-exported modules)
Imports and exports define template visibility; they do not automatically expose all implementation details.
try it in the quiz →
187.
What convention does forRoot commonly express in older library modules?
mid
1. ACreating one database row
2. BDisabling child modules
3. CConfiguring application-level providers separately from reusable declarations
Show answer
Answer: C (Configuring application-level providers separately from reusable declarations)
The pattern helps avoid unintentionally repeating root configuration when modules are imported in several places.
try it in the quiz →
188.
Why can a lazy-loaded module have a separate service instance?
mid
1. ALazy modules cannot inject services
2. BIt can have its own injector and providers
3. CEvery service is always global
Show answer
Answer: B (It can have its own injector and providers)
Provider placement and hierarchy determine instance scope, including legacy lazy module boundaries.
try it in the quiz →
189.
Can standalone components and NgModule-based code coexist?
mid
1. AYes, through supported imports and integration
2. BNo, every file must migrate at once
3. COnly in unit tests
Show answer
Answer: A (Yes, through supported imports and integration)
Incremental migration is possible; preserve provider scopes and template dependencies carefully.
try it in the quiz →
190.
What should be checked when migrating a tracked list to built-in control flow?
mid
1. AOnly indentation
2. BWhether every service is injectable
3. CIdentity semantics and behavior during insertions or reorder
Show answer
Answer: C (Identity semantics and behavior during insertions or reorder)
A syntax migration can preserve compilation while changing view reuse if tracking is chosen poorly.
try it in the quiz →
191.
Should every RxJS stream automatically be replaced with a signal?
mid
1. AOnly HTTP errors need RxJS
2. BNo, event composition and cancellation may still suit RxJS
3. CYes, signals implement every stream operator
Show answer
Answer: B (No, event composition and cancellation may still suit RxJS)
Choose based on semantics; signals represent reactive state while streams can model time and events.
try it in the quiz →
192.
How should deprecated APIs be handled during an Angular upgrade?
mid
1. AUse version-specific migration guidance and verify behavior
2. BAssume deprecated means already removed everywhere
3. CIgnore all warnings indefinitely
Show answer
Answer: A (Use version-specific migration guidance and verify behavior)
Deprecation and removal vary by version; check the target release and dependent libraries.
try it in the quiz →
193.
Several instances of a dashboard widget need independent filters. Where can their filter state live?
mid
1. AIn each widget or a widget-scoped service
2. BIn one unkeyed global filter variable
3. CIn the shared stylesheet
Show answer
Answer: A (In each widget or a widget-scoped service)
Independent instance state needs local ownership or explicit identity in a shared store.
try it in the quiz →
194.
A user clears a typeahead input. What should the request pipeline do?
mid
1. AKeep old suggestions indefinitely without explanation
2. BSend an invalid request unconditionally
3. CApply a deliberate empty-query policy and clear or replace stale results
Show answer
Answer: C (Apply a deliberate empty-query policy and clear or replace stale results)
Empty input is a meaningful state that should be handled explicitly rather than falling through accidentally.
try it in the quiz →
195.
What should prevent advancing a multi-step form with invalid required data?
mid
1. AA random tracking expression
2. BAn explicit validation and navigation policy
3. COnly the visual step number
Show answer
Answer: B (An explicit validation and navigation policy)
Keep step validity and navigation rules aligned, with clear feedback and preserved drafts.
try it in the quiz →
196.
How can a live feed detect missed events after reconnecting?
hard
1. AUse server-supported sequence or cursor information
2. BAssume the socket never loses data
3. CCompare component class names
Show answer
Answer: A (Use server-supported sequence or cursor information)
Reconnect alone does not recover missed messages; protocol-level resynchronization is required.
try it in the quiz →
197.
Where must file type, size and authorization be enforced authoritatively?
mid
1. AOnly in the file input accept attribute
2. BOnly in an Angular pipe
3. COn the server
Show answer
Answer: C (On the server)
Client checks improve feedback but can be bypassed; server validation protects the actual upload boundary.
try it in the quiz →
198.
How should selected records survive pagination when required?
mid
1. AStore only their current DOM elements
2. BTrack stable record IDs with an explicit selection policy
3. CTrack only visible row indices
Show answer
Answer: B (Track stable record IDs with an explicit selection policy)
Row positions change across pages. Define whether selection covers viewed records or a server-side filtered set.
try it in the quiz →
199.
What can prevent silent overwriting when two editors save the same record?
hard
1. AServer-checked versioning and a conflict-resolution flow
2. BDisabling the local save button forever
3. CAdding OnPush
Show answer
Answer: A (Server-checked versioning and a conflict-resolution flow)
Concurrency control belongs in the data protocol; change detection does not resolve competing writes.
try it in the quiz →
200.
What helps investigate a production-only Angular request failure?
mid
1. ALogging passwords with every event
2. BOnly increasing animation duration
3. CCorrelated request identifiers and safe client diagnostics
Show answer
Answer: C (Correlated request identifiers and safe client diagnostics)
Correlate relevant events while excluding sensitive data so client and server failures can be connected.
try it in the quiz →
201.
The parent's Rename button is clicked. What does the OnPush card show afterwards?
mid
```
@Component({
  selector: 'app-user-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ user().name }}</p>`,
})
export class UserCard {
  user = input.required<{ name: string }>();
}

// Parent template: <app-user-card [user]="user" /> <button (click)="rename()">Rename</button>
// Parent class:
user = { name: 'Ada' };
rename() { this.user.name = 'Grace'; }
```
1. AGrace: the click ran change detection for the whole app
2. BStill Ada: the input reference didn't change, so the OnPush card is never marked for check
3. CAngular throws ExpressionChangedAfterItHasBeenCheckedError
4. DGrace, but only in development mode
Show answer
Answer: B (Still Ada: the input reference didn't change, so the OnPush card is never marked for check)
An OnPush component is refreshed when an input receives a new value (by reference), an event handler in its template fires, a signal its template reads changes, or it's explicitly marked for check. Mutating user.name keeps the same object, so the input never changes. Replace the object instead: this.user = { ...this.user, name: 'Grace' }, or keep it in a signal and use update.
try it in the quiz →read the note →
202.
What is logged?
mid
```
const count = signal(1);
const double = computed(() => {
  console.log('computing');
  return count() * 2;
});

count.set(2);
count.set(3);
console.log(double());
console.log(double());
```
1. Acomputing, 6, 6
2. Bcomputing, computing, computing, 6, 6
3. Ccomputing, 6, computing, 6
4. D6, 6
Show answer
Answer: A (computing, 6, 6)
computed is lazy: nothing runs until it's first read, so the two set calls don't compute anything. The first read computes and caches 6; the second read returns the cached value because count hasn't changed since.
try it in the quiz →read the note →
203.
What is logged?
hard
```
const user = signal({ name: 'Ada' });
const greeting = computed(() => `Hi ${user().name}`);

console.log(greeting());
user().name = 'Grace';
console.log(greeting());
```
1. AHi Ada, Hi Grace
2. BHi Ada, then an error because signal values are frozen
3. CHi Ada, Hi Ada
4. DHi Grace, Hi Grace
Show answer
Answer: C (Hi Ada, Hi Ada)
Mutating the object held by a signal doesn't notify anything, so greeting keeps returning its memoized value. Produce a new object instead: user.update(u => ({ ...u, name: 'Grace' })). Signals compare values with Object.is by default.
try it in the quiz →
204.
Where in a component class can you call inject(HttpClient) without any extra setup?
mid
1. AInside ngOnInit
2. BInside a setTimeout callback started from the constructor
3. CIn a field initializer or the constructor
4. DAnywhere, as long as HttpClient is provided in root
Show answer
Answer: C (In a field initializer or the constructor)
inject() only works in an injection context: constructors, field initializers, provider factories, functional guards, resolvers and interceptors, or code wrapped in runInInjectionContext. Calling it later, e.g. in ngOnInit or a callback, throws NG0203. Inject into a field (private http = inject(HttpClient)) and use the field anywhere.
try it in the quiz →read the note →
205.
CartService is @Injectable({ providedIn: 'root' }), and ProductPanel also declares providers: [CartService]. The page shows two ProductPanels, and the header (outside the panels) injects CartService too. How many instances exist?
hard
1. A1
2. B2
3. C3
4. DNone: providing a root service again is a compile error
Show answer
Answer: C (3)
Each ProductPanel instance gets its own element injector with its own CartService, shared by that panel's children. The header isn't inside a panel, so its lookup falls through to the root injector and gets the app-wide singleton: two panel instances plus one root instance.
try it in the quiz →read the note →
206.
After add() runs, the displayed total doesn't change. Why?
mid
```
@Pipe({ name: 'total' })
export class TotalPipe implements PipeTransform {
  transform(items: { price: number }[]): number {
    return items.reduce((sum, item) => sum + item.price, 0);
  }
}

// Template: <p>Total: {{ cart | total }}</p>
// Component:
cart = [{ price: 10 }];
add(item: { price: number }) { this.cart.push(item); }
```
1. APipes can't receive arrays, only primitive values
2. BThe pipe must implement OnChanges to notice new items
3. CPipes are evaluated on the first render, then cached forever
4. DA pure pipe re-runs only when its input changes by reference, and push mutates the same array
Show answer
Answer: D (A pure pipe re-runs only when its input changes by reference, and push mutates the same array)
Pipes are pure by default, so Angular skips transform when the input is the same reference (or the same primitive value). Use an immutable update like this.cart = [...this.cart, item], or a signal plus computed. Setting pure: false also works, but then the pipe runs on every change detection cycle.
try it in the quiz →
207.
Which part of an @for block is mandatory?
easy
1. AThe track expression
2. Blet i = $index
3. CAn @empty block
4. DA trackBy method on the component
Show answer
Answer: A (The track expression)
@for (item of items; track item.id) { ... } won't compile without track. It tells Angular how to identify items so it can move and reuse DOM nodes instead of re-creating them. Track a stable id; $index is only fine for static lists. @empty is optional.
try it in the quiz →
208.
Apart from the constructor, which lifecycle hook runs first for a component whose input is bound in the parent's template?
easy
1. AngOnInit
2. BngOnChanges
3. CngDoCheck
4. DngAfterViewInit
Show answer
Answer: B (ngOnChanges)
ngOnChanges runs whenever bound inputs are set, including the first time, before ngOnInit. Then ngOnInit runs once, followed by ngDoCheck, the content hooks and the view hooks. A component with no bound inputs never gets ngOnChanges.
try it in the quiz →
209.
What is logged?
mid
```
@Component({
  selector: 'app-toolbar',
  template: `@if (show) { <input #search /> }`,
})
export class Toolbar {
  show = true;
  @ViewChild('search') search?: ElementRef<HTMLInputElement>;

  ngOnInit() { console.log('init', this.search); }
  ngAfterViewInit() { console.log('view', this.search); }
}
```
1. Ainit ElementRef, view ElementRef
2. Binit undefined, view undefined
3. CAn error: @ViewChild can't find elements inside @if
4. Dinit undefined, view ElementRef
Show answer
Answer: D (init undefined, view ElementRef)
Dynamic view queries (the default static: false, and the only option that works inside @if/@for) are resolved after the view is created, so the value is first available in ngAfterViewInit. The signal-based viewChild('search') returns a signal instead, which you can read in computed or effect without worrying about timing.
try it in the quiz →
210.
A Save button sends an HTTP request per click. While a save is in flight, extra clicks should be ignored. Which operator goes in clicks$.pipe(???(() => this.api.save(form)))?
mid
1. AswitchMap
2. BmergeMap
3. CconcatMap
4. DexhaustMap
Show answer
Answer: D (exhaustMap)
exhaustMap ignores new source values while its current inner observable is still active, so double-clicks are dropped. switchMap would cancel the in-flight save, mergeMap would send parallel saves, and concatMap would queue one save per click.
try it in the quiz →read the note →
211.
What does this print?
hard
```
of(3, 1, 2)
  .pipe(concatMap((n) => of(n).pipe(delay(n * 100))))
  .subscribe(console.log);
```
1. A1, 2, 3
2. B3, 1, 2
3. C3
4. D2
Show answer
Answer: B (3, 1, 2)
concatMap subscribes to the next inner observable only after the previous one completes, so output keeps source order: 3 (after 300 ms), then 1, then 2, even though the later delays are shorter. mergeMap would print 1, 2, 3, in completion order.
try it in the quiz →read the note →
212.
What does this print?
hard
```
of(3, 1, 2)
  .pipe(switchMap((n) => of(n).pipe(delay(n * 100))))
  .subscribe(console.log);
```
1. A3, 1, 2
2. B1, 2, 3
3. C2
4. D3
Show answer
Answer: C (2)
of emits 3, 1 and 2 synchronously. Each new value makes switchMap unsubscribe from the previous delayed inner observable before it can emit, so only the last one (2) survives. exhaustMap would print only 3.
try it in the quiz →read the note →
213.
What is logged?
easy
```
const status = new BehaviorSubject(0);
status.next(1);
status.subscribe((v) => console.log('A', v));
status.next(2);
```
1. AA 0, A 1, A 2
2. BA 1, A 2
3. CA 2
4. DA 0, A 2
Show answer
Answer: B (A 1, A 2)
A BehaviorSubject holds the current value and emits it immediately to each new subscriber, so A first receives 1 (the initial 0 had already been replaced) and then 2. With a plain Subject, A would only receive 2.
try it in the quiz →
214.
What is logged?
mid
```
const subject = new Subject<number>();
const replay = new ReplaySubject<number>(2);

[1, 2, 3].forEach((n) => {
  subject.next(n);
  replay.next(n);
});

subject.subscribe((v) => console.log('subject', v));
replay.subscribe((v) => console.log('replay', v));
```
1. Areplay 2, replay 3
2. Bsubject 3, replay 2, replay 3
3. Creplay 1, replay 2
4. Dsubject 1, subject 2, subject 3, replay 2, replay 3
Show answer
Answer: A (replay 2, replay 3)
A Subject has no memory: values emitted before you subscribe are simply lost. ReplaySubject(2) buffers the last two values and replays them to every new subscriber.
try it in the quiz →
215.
How many HTTP requests does this code send?
easy
```
const users$ = this.http.get<User[]>('/api/users');

users$.subscribe((users) => this.render(users));
users$.subscribe((users) => this.cache(users));
```
1. AOne: the second subscriber reuses the response
2. BNone until firstValueFrom() is called
3. CTwo
4. DOne, and the second subscribe throws
Show answer
Answer: C (Two)
HttpClient observables are cold: every subscription runs the request again. Subscribe once, or share the result with shareReplay(1). The flip side: if nothing subscribes, no request is sent at all.
try it in the quiz →
216.
Three components call getConfig() and subscribe at different times, all after the first response has arrived. How many requests reach the server?
mid
```
@Injectable({ providedIn: 'root' })
export class ConfigService {
  private http = inject(HttpClient);
  private config$ = this.http
    .get<Config>('/api/config')
    .pipe(shareReplay(1));

  getConfig() {
    return this.config$;
  }
}
```
1. A3
2. B2
3. C0
4. D1
Show answer
Answer: D (1)
shareReplay(1) shares one subscription to the source and replays the last value to later subscribers, so all three get the cached config from a single request. Plain share() would re-run the request for a subscriber that arrives after the source has completed.
try it in the quiz →
217.
What happens when this component initializes?
mid
```
@Component({ selector: 'app-ticker', template: '' })
export class Ticker implements OnInit {
  ngOnInit() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe((n) => console.log(n));
  }
}
```
1. AIt ticks until the component is destroyed
2. BIt throws NG0203: without an argument, takeUntilDestroyed() needs an injection context
3. CIt never ticks, because it completes immediately
4. DIt ticks forever, because takeUntilDestroyed only works with the async pipe
Show answer
Answer: B (It throws NG0203: without an argument, takeUntilDestroyed() needs an injection context)
With no argument, takeUntilDestroyed() injects the current DestroyRef, which only works in an injection context such as the constructor or a field initializer. In ngOnInit, inject DestroyRef into a field and pass it: takeUntilDestroyed(this.destroyRef).
try it in the quiz →
218.
A signed-out user navigates to /account. What happens?
mid
```
export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.createUrlTree(['/login']);
};

// { path: 'account', component: Account, canActivate: [authGuard] }
```
1. ANavigation to /account completes and a warning is logged
2. BIt throws, because inject() can't be used in a plain function
3. CThe /account navigation is cancelled and the router redirects to /login
4. DThe page stays blank until the guard runs again
Show answer
Answer: C (The /account navigation is cancelled and the router redirects to /login)
Functional guards run in an injection context, so inject() works inside them. Returning a UrlTree cancels the current navigation and starts a new one to that URL; returning false would only cancel it. Client-side guards are UX: the server must still enforce authorization.
try it in the quiz →
219.
Inside an HttpInterceptorFn (req, next) => ..., which snippet correctly adds an Authorization header?
easy
1. Areq.headers.set('Authorization', token); return next(req);
2. Breq.setHeader('Authorization', token); return next(req);
3. Creturn next({ ...req, headers: { Authorization: token } });
4. Dreturn next(req.clone({ setHeaders: { Authorization: 'Bearer ' + token } }));
Show answer
Answer: D (return next(req.clone({ setHeaders: { Authorization: 'Bearer ' + token } }));)
HttpRequest and HttpHeaders are immutable: req.headers.set(...) returns a new headers object and leaves req unchanged, so passing req on sends it without the header. req.clone() with setHeaders creates a modified copy. Register it with provideHttpClient(withInterceptors([authInterceptor])).
try it in the quiz →
220.
Where does the <p> end up?
easy
```

<header><ng-content select="[card-title]" /></header>
<section><ng-content /></section>


<app-card>
  <h2 card-title>Hello</h2>
  <p>Body text</p>
</app-card>
```
1. AInside the section, via the default <ng-content />
2. BInside the header, next to the title
3. CNowhere: it doesn't match any selector
4. DIn both the header and the section
Show answer
Answer: A (Inside the section, via the default <ng-content />)
Content matching select="[card-title]" goes into that slot; everything else goes into the <ng-content> without a selector. Each node is projected into at most one slot, and without a default slot unmatched content isn't rendered at all.
try it in the quiz →
221.
What is the inferred type of name.value, and what is logged?
mid
```
const name = new FormControl('Ada');
name.setValue('Grace');
name.reset();
console.log(name.value);
```
1. Astring, and it logs 'Ada'
2. Bstring, and it logs ''
3. Cany, and it logs undefined
4. Dstring | null, and it logs null
Show answer
Answer: D (string | null, and it logs null)
Typed forms infer FormControl<string | null> because reset() sets the value to null by default. Pass { nonNullable: true } (or use fb.nonNullable) to get a string type and have reset() restore the initial value 'Ada'.
try it in the quiz →
222.
The app uses provideZonelessChangeDetection() and nothing else happens on the page. What does the user see two seconds after the component renders?
hard
```
@Component({
  selector: 'app-status',
  template: `<p>{{ status }}</p>`,
})
export class Status {
  status = 'loading';

  constructor() {
    setTimeout(() => (this.status = 'done'), 1000);
  }
}
```
1. Adone
2. Bloading
3. CAn NG0100 error
4. Dloading and done flickering
Show answer
Answer: B (loading)
Without zone.js, Angular isn't told that a timer callback ran. Zoneless change detection is scheduled by notifications: a signal read in a template changing, a template event handler, markForCheck() (which the async pipe calls), and similar. A plain field assignment triggers none of them. Make status a signal and call this.status.set('done').
try it in the quiz →read the note →
223.
Which route definition lazy-loads a standalone component?
easy
1. A{ path: 'admin', component: AdminComponent, lazy: true }
2. B{ path: 'admin', loadComponent: () => import('./admin.component').then((m) => m.AdminComponent) }
3. C{ path: 'admin', loadChildren: AdminComponent }
4. D{ path: 'admin', component: () => import('./admin.component') }
Show answer
Answer: B ({ path: 'admin', loadComponent: () => import('./admin.component').then((m) => m.AdminComponent) })
loadComponent takes a function returning a dynamic import(), so the bundler puts the component in its own chunk that downloads on first navigation. loadChildren lazily loads a Routes array instead. If the component is the file's default export, the .then(...) can be omitted.
try it in the quiz →
224.
typeTwice() is called from a click handler after the component has rendered. What does the effect log as a result of that call?
hard
```
export class Search {
  query = signal('');

  constructor() {
    effect(() => console.log('query is', this.query()));
  }

  typeTwice() {
    this.query.set('a');
    this.query.set('ab');
  }
}
```
1. A'query is a', then 'query is ab'
2. B'query is ab', twice
3. CNothing: effects only run once, when they're created
4. D'query is ab', once
Show answer
Answer: D ('query is ab', once)
Effects don't run synchronously on every set. They're marked dirty and executed asynchronously as part of change detection, reading the signals' current values, so two synchronous writes lead to a single run that sees 'ab'. (Every effect also runs once initially, which logged the empty query.)
try it in the quiz →
225.
Given these providers on a component, is a === b in its child?
hard
```
providers: [
  NewLogger,
  { provide: OldLogger, useExisting: NewLogger },
],

// In a child component:
private a = inject(NewLogger);
private b = inject(OldLogger);
```
1. AYes: useExisting makes the OldLogger token resolve to the same NewLogger instance
2. BNo: useExisting creates a second NewLogger instance
3. CNo: b is an OldLogger instance
4. DIt throws, because OldLogger has no class provider
Show answer
Answer: A (Yes: useExisting makes the OldLogger token resolve to the same NewLogger instance)
useExisting aliases one token to another, so both tokens resolve to one instance. useClass: NewLogger would create a separate instance for the OldLogger token. Aliasing is handy when migrating consumers from an old service to a new one.
try it in the quiz →read the note →
226.
Non-admin users must not even download the admin route's lazy chunk, and should fall through to another route with the same path. Which guard fits?
mid
1. AcanActivate
2. BcanDeactivate
3. CcanActivateChild
4. DcanMatch
Show answer
Answer: D (canMatch)
canMatch runs while the router is matching routes. If it returns false, the route is treated as not matching, so its loadChildren/loadComponent isn't loaded and the router moves on to the next route with that path. It replaced the deprecated canLoad.
try it in the quiz →
227.
What does this template do?
mid
```
@defer (on viewport) {
  <app-sales-chart />
} @placeholder {
  <div class="chart-skeleton"></div>
}
```
1. ARenders the chart immediately but hides it until it's scrolled into view
2. BDelays change detection for the chart until it is visible
3. CLoads the chart's code as a separate chunk and renders it once the placeholder is in view
4. DOnly works when the chart is lazy-loaded through the router
Show answer
Answer: C (Loads the chart's code as a separate chunk and renders it once the placeholder is in view)
@defer moves standalone dependencies used only inside the block into a separate chunk. The placeholder renders first; when it enters the viewport (via IntersectionObserver) Angular fetches the chunk and swaps in the chart. If the chart were also referenced elsewhere in the same file, it would be bundled eagerly.
try it in the quiz →
228.
An OnPush component displays {{ user$ | async }}, and user$ emits later when an HTTP call returns. Why does the view update?
easy
1. AOnPush components are checked whenever any observable in the app emits
2. BHttpClient triggers a full refresh that ignores OnPush
3. CIt doesn't: you have to subscribe manually and call detectChanges()
4. DThe async pipe calls markForCheck() whenever it receives a new value
Show answer
Answer: D (The async pipe calls markForCheck() whenever it receives a new value)
The async pipe subscribes for you, marks the component and its ancestors for check on every emission, and unsubscribes when the view is destroyed. That is why it works in OnPush and zoneless apps without manual ChangeDetectorRef calls.
try it in the quiz →read the note →
229.
What is logged?
mid
```
const a$ = new Subject<string>();
const b$ = new Subject<string>();
combineLatest([a$, b$]).subscribe(([a, b]) => console.log(a + b));

a$.next('a1');
a$.next('a2');
b$.next('b1');
a$.next('a3');
```
1. Aa1b1, a2b1, a3b1
2. Ba3b1
3. Ca2b1, a3b1
4. Da1b1, a3b1
Show answer
Answer: C (a2b1, a3b1)
combineLatest emits nothing until every source has emitted at least once; after that, any emission produces the latest value from each source. a1 was replaced by a2 before b$ emitted, so it's never combined. Use startWith on a source if you need an immediate first value.
try it in the quiz →
230.
What is logged?
mid
```
interval(10)
  .pipe(
    map((n) => {
      if (n === 2) throw new Error('boom');
      return n;
    }),
    catchError(() => of('fallback')),
  )
  .subscribe({ next: console.log, complete: () => console.log('complete') });
```
1. A0, 1, fallback, 3, 4, ... (keeps going)
2. B0, 1, fallback, complete
3. C0, 1, then an uncaught error
4. D0, 1, complete
Show answer
Answer: B (0, 1, fallback, complete)
An error terminates the source stream. catchError swaps in the observable you return, here of('fallback'), which emits once and completes, so the whole chain completes. To keep an outer stream alive (like a search box), put catchError on the inner observable inside switchMap.
try it in the quiz →
231.
A child component declares value = model(0). In the parent, <app-stepper [(value)]="count" /> with a plain count field is shorthand for which binding?
mid
1. A<app-stepper [value]="count" (valueChange)="count = $event" />
2. B<app-stepper [value]="count" (change)="count = $event" />
3. C<app-stepper [model]="count" />
4. D<app-stepper (value)="count" />
Show answer
Answer: A (<app-stepper [value]="count" (valueChange)="count = $event" />)
model() creates a writable signal input plus an output with the same name and a Change suffix. When the child calls this.value.set(...), it emits valueChange, and the banana-in-a-box syntax wires both directions. If count is a writable signal, Angular updates the signal for you.
try it in the quiz →
232.
This standalone component fails to compile because the currency pipe can't be found. What's the fix?
easy
```
@Component({
  selector: 'app-price',
  template: `{{ amount | currency }}`,
})
export class Price {
  amount = 42;
}
```
1. AAdd standalone: true
2. BAdd imports: [CurrencyPipe] to the component
3. CDeclare the pipe in AppModule
4. DRegister the pipe globally in app.config.ts
Show answer
Answer: B (Add imports: [CurrencyPipe] to the component)
Standalone components, the default in modern Angular, must list every component, directive and pipe their template uses in their own imports array; here that's CurrencyPipe from @angular/common. There's no global registration, which keeps dependencies explicit and tree-shakable.
try it in the quiz →