All 60 Angular quiz questions below come with a short explanation, visible right on the page — no sign-in needed. They're grouped by beginner and intermediate levels and 10 subtopics, so you can revise one part at a time. Choose Try Angular quiz above to take a scored run and review the questions you got wrong.
What is the most fundamental difference between Angular and React when picking a stack?
A.React has TypeScript while Angular can only be written in plain JavaScript
B.Angular runs on the server while React runs in the browser, so they solve different problems
C.Angular is a complete framework; React is a view library and the team picks the rest
D.Angular has no components, only loose HTML templates like jQuery
Answer: C
Angular is a batteries-included framework: router, HTTP client, forms, dependency injection, CLI, and testing all ship from the Angular team and are versioned together. React is a view library — router, state management, and forms must be chosen separately from the ecosystem. In return, Angular enforces a stricter architecture, while React is more flexible but the team must decide more on its own.
A.A TypeScript class holding state and logic, plus a @Component decorator declaring the metadata
B.A default-exported object literal in which a render property is required
C.Just an HTML file — Angular generates the matching class at build time
D.A function returning JSX like React, registered through an NgModule
Answer: A
An Angular component has three parts: a TypeScript class holding state and logic, an HTML template describing the UI, and styles. The @Component decorator links them via metadata: selector (the tag name used in other templates), template/templateUrl, and styles/styleUrl. Angular reads this metadata at compile time to generate the rendering code.
Which statement about standalone components is FALSE?
A.It removes the NgModule middle layer, so there is less boilerplate and fewer small mistakes
B.You can lazily load a component directly with loadComponent, with no module wrapper
C.A component declares its own dependencies in an imports array, with no declarations
D.It removes dependency injection entirely — services no longer need providers
Answer: D
A standalone component declares its own dependencies in its imports, so it needs no NgModule for declarations/exports. The result: fewer intermediate files, dependencies sit next to where they're used, and lazy loading works directly via loadComponent. Dependency injection is unchanged — services still use providedIn: "root" or route-level providers.
The template below uses three different binding mechanisms. Which description is correct?
html
<h2>{{ title }}</h2><img [src]="avatarUrl" [alt]="userName"><button (click)="save()">Save</button>
A.All three are two-way bindings, so the data syncs in both directions
B.[src] sets an HTML attribute while {{ }} sets a property — they are equivalent
C.(click)="save()" only works if save is declared in the template rather than in the class
D.Interpolation puts a value into text; [prop] sets a property; (event) listens for an event
Answer: D
Interpolation {{ expr }} inserts a value into text content. Property binding [prop]="expr" assigns to a property of a DOM element or a component input, flowing component → template. Event binding (event)="handler()" runs a class method when the event occurs, flowing template → component. To set an actual HTML attribute, use [attr.aria-label].
What are @Input() and @Output() for in parent–child component communication?
A.@Input() receives data from the parent; @Output() emits events up to it
B.Both pass data in both directions, so changing it in the child updates the parent
C.@Input() is for services while @Output() is for HTTP responses
D.@Output() sends data from parent to child while @Input() sends it back up
Answer: A
@Input() declares a property the parent assigns via property binding (<child [value]="x">) — data flows parent to child. @Output() declares an EventEmitter that the child calls emit(payload) on, while the parent listens with (changed)="onChanged($event)" — events flow child to parent. The data flow is therefore clearly one-way per direction.
How does a structural directive differ from an attribute directive?
A.Structural directives cannot be written by hand, only Angular can define them
B.Structural directive adds/removes DOM elements; attribute directive changes appearance/behavior
C.An attribute directive must be prefixed with a *
D.Structural directives run only on the server, attribute directives only on the client
Answer: B
A structural directive changes the DOM structure: adding, removing, or repeating elements — *ngIf, *ngFor, *ngSwitchCase. The * is shorthand syntax for wrapping the element in an <ng-template>. An attribute directive keeps the structure and changes the appearance or behaviour of an existing element — ngClass, ngStyle, or your own custom directive.
const count = signal(0)
console.log(count()) // 0 — read it by calling the function
count.set(5)
count.update(n => n + 1)
A.A mechanism for sending events between components, replacing @Output()
B.A decorator marking a property for change detection to track
C.A wrapper around a value, read by calling it like a function, with Angular recording where it is read
D.A renamed RxJS Observable with the full operator set: map, filter, switchMap
Answer: C
A signal is a value holder that can notify when that value changes. You read it by calling it like a function — count() — and every read inside a reactive context (template, computed, effect) registers a dependency. You write with set() or update(). Because Angular knows exactly what depends on what, it updates only that part instead of checking the whole component tree.
What principle does dependency injection follow in Angular?
A.A class declares what it needs and Angular looks it up in an injector and supplies the instance
B.A service is only usable in a component that has imported the service file with an ES module import
C.Each class news its own service so no state is shared
D.Angular imports services automatically based on the filename, with nothing to declare
Answer: A
DI inverts who creates dependencies: a class only declares what it needs, while Angular's injector creates and supplies the instance. A service marked @Injectable({ providedIn: "root" }) is available app-wide as a singleton. This also lets tests supply a replacement without modifying component code.
A.A Routes array mapping paths to components, provideRouter, and <router-outlet>
B.Routes must be declared in an NgModule, so a standalone app cannot use the router
C.<router-outlet> is only for lazy routes; ordinary routes render straight into the body
D.Just put component files in directories named after the paths and Angular generates the routes
Answer: A
Three pieces: a Routes array mapping paths to components (with :id for dynamic params and ** for the not-found page), registration via provideRouter(routes) in bootstrapApplication, and <router-outlet> marking where the route's component is rendered. Navigation in the template uses routerLink, in code it uses Router.navigate().
A.Registering a service with the application's injector
B.Transforming a value right in the template as it is displayed
C.Combining several Observables together
D.Passing data from a parent component down to a child
Answer: B
A pipe transforms a displayed value right in the template: {{ date | date:"dd/MM/yyyy" }}. Angular ships date, currency, number, json, async. The key point: pipes are pure by default — they re-run only when the input reference changes, so they are very cheap.
In a modern standalone Angular app, what role is left for NgModule?
A.It no longer exists in modern Angular — code with an NgModule will not compile
B.You still need at least one root NgModule to bootstrap the application
C.Mainly compatibility with older libraries and grouping providers during a gradual migration
D.It is only used for lazy loading, since loadComponent does not exist
Answer: C
NgModule is still supported but is no longer the default. Its remaining roles: compatibility with older libraries that export NgModules, and serving as a place to group a set of providers or shared declarations during incremental migration. New apps bootstrap with bootstrapApplication(AppComponent, { providers: [...] }), and each standalone component declares its own imports.
Which lifecycle hook is the right place to first read an @Input(), and why not the constructor?
A.ngAfterViewInit — inputs belong to the view so you must wait for it to initialize
B.ngOnDestroy — it runs last, so the input is certain to have a value
C.ngOnInit — the constructor runs before Angular assigns the input values
D.The constructor — Angular assigns inputs before calling it
Answer: C
Use ngOnInit. The order is: constructor → input assignment → ngOnChanges → ngOnInit → ngAfterViewInit → ... → ngOnDestroy. The constructor runs when the instance is first created, so inputs are still undefined; the constructor should only receive dependencies, while input-based initialization goes in ngOnInit. To react every time an input changes, use ngOnChanges or a signal input with computed/effect.
A.Signal inputs only work in non-standalone components
B.The value is wrapped in a signal, so computed/effect react to it directly
C.A signal input lets the child assign a value back up to the parent with set()
D.It is only shorter syntax; internally Angular still calls ngOnChanges so you must compare values yourself
Answer: B
input() returns a read-only signal: read it with user(), and any computed/effect that reads it re-runs automatically when the parent passes a new value. input.required<T>() forces the parent to pass a value, and the compiler errors if it's missing. Compared to @Input(), there's no need for ngOnChanges to track changes, and typing is stricter since you don't have to declare undefined for the unassigned state.
A.@for needs no identity key because Angular compares by reference
B.@if only works with signals, not with ordinary variables
C.They are built into the compiler so no CommonModule is needed, and track is mandatory
D.It is only nicer syntax; it still compiles down to *ngIf/*ngFor
Answer: C
The new control flow lives in the compiler rather than in directives, so templates don't need to import CommonModule. The syntax is richer: @else if/@else, @empty for empty lists, and as to name a value. track in @for is mandatory — it forces you to think about the identity key, which determines performance when the list changes.
Why does the track expression in @for matter for performance?
A.It sorts the list by the track value before rendering to the DOM
B.It filters out duplicate items in the array
C.It tells Angular "this is still the same item" between two renders
D.It caches data in localStorage between page navigations
Answer: C
track gives each item a stable identity. When the array changes, Angular matches by the track value to know which DOM nodes to keep, add, or remove. Without correct identity, every item is treated as new and the whole list re-renders — losing child component state, losing focus, and wasting performance. Use a stable id from the data; only use the index when the list is purely static.
A.It splits that part of the template and its dependencies out of the initial bundle, loading it on demand
B.It replaces lazy route loading — with @defer you no longer need to split routes
C.@defer can only be triggered manually by calling a function in the class
D.The @defer block stays in the initial bundle; only its rendering into the DOM is delayed
Answer: A
@defer splits part of the template and its dependencies into a separate chunk, loaded only when a trigger fires: on idle (default), on viewport, on interaction, on hover, on timer, or when <condition>. It comes with @placeholder (shown before loading), @loading (while loading), and @error. Use it for heavy blocks that aren't immediately important: charts, editors, comment sections.
A.When you want the child to call an API without the parent knowing
B.When you need to pass asynchronous data from a service down to a child component
C.When the component is a container and the caller decides its content
D.Only one <ng-content> is allowed per component, so you cannot split it into several regions
Answer: C
<ng-content> is used when the component is a wrapper (card, modal, panel) and the content inside is decided by the caller. The parent writes markup inside the component tag, and Angular projects that markup into the <ng-content> position. For multiple slots, use select with a CSS selector: <ng-content select="[card-title]">. Use projection to pass markup; use inputs to pass data.
A.All three are writable, differing only in declaration syntax
B.computed re-runs on every change detection cycle whether its dependencies changed or not
C.signal holds writable state; computed derives with caching; effect performs side effects
D.effect is where derived values should be computed and set back into another signal
Answer: C
signal(v) holds writable state, changed with set/update. computed(fn) declares a derived value: it only computes when read, caches the result, and recomputes when dependencies change. effect(fn) is for side effects — logging, syncing localStorage, calling APIs outside the signal system. Derived values should always be computed, not an effect writing back into another signal.
When should you use a Signal and when should you keep an Observable in Angular?
A.Signals only work in templates, not in services
B.Observables are synchronous while signals are asynchronous
C.Signals fully replace RxJS; a modern codebase should have no Observables left
D.Signals for synchronous state the UI reads; Observables for event streams over time
Answer: D
A signal represents state: it always has a current value, reads synchronously, and suits what the template needs to display. An Observable represents a stream of events over time: HTTP, debounced keystrokes, WebSocket, streams that need cancellation or retry. The two convert back and forth via toSignal() and toObservable(), so in practice you often use Observables in the data layer and signals in the display layer.
With ChangeDetectionStrategy.OnPush, which case does NOT mark the component for re-check?
A.A signal read in the template changes value, or an async pipe emits a new value
B.A DOM event emitted from the component's own template (for example (click))
C.An @Input() receiving a new reference (compared with ===)
D.Mutating a property inside an object passed through an input without creating a new object
Answer: D
OnPush makes Angular check the component only when: an input receives a new reference, an event is emitted from the component's template, a signal read in the template changes value, or the async pipe emits a new value. Mutating the inside of an object that was passed in (keeping the same reference) won't trigger a check — which is why OnPush goes hand in hand with immutable data.
A.It turns the Observable into a Promise and awaits it in the template
B.It is only shorter syntax; you still need unsubscribe in ngOnDestroy
C.It caches the HTTP result so the next navigation does not call the API again
D.It subscribes when the view initializes and unsubscribes when the view is destroyed
Answer: D
The async pipe subscribes for you and unsubscribes when the view is destroyed, so no manual cleanup is needed. On each new value the pipe marks the component for check, so it works correctly with OnPush too. Note: use it once and assign with as — each | async is a separate subscription, and with a cold observable like HTTP that becomes multiple API calls.
How does providedIn: "root" differ from listing a service in a component's providers?
A.providedIn: "root" gives one shared instance; providers creates a separate instance
B.Declaring it in a component's providers prevents the service from injecting other services
C.providedIn: "root" creates a new instance for each component that injects it
D.The two are entirely equivalent, differing only in where you write them
Answer: A
providedIn: "root" registers the service in the root injector: a single instance for the whole app, alive until the app closes, and tree-shaken out of the bundle if nobody injects it. Putting the service in a component's providers creates a separate instance per component instance, destroyed when the component is destroyed — good for local state of one screen, not for data that needs to be shared.
A.inject() only works for Angular's own services, not for ones you write
B.inject() can only be called in an injection context, but in exchange it works inside functions
C.inject() creates a new instance on each call, unlike constructor injection which reuses a singleton
D.inject() can be called anywhere, even inside a setTimeout callback
Answer: B
Both look up the same injector and get the same instance. The difference is where you can call it: inject() is only valid in an injection context — field initializer, constructor, or factory — but because it's a function it can be used in functional guards, interceptors, and shared utility functions. The code is also cleaner with inheritance since you don't have to forward the parent class's constructor parameters.
A.Set a lazy: true property in the route definition
B.loadComponent with a dynamic import; loadChildren for a whole route branch
C.Angular lazily loads every route automatically with no configuration
D.You must create a separate NgModule for each page and point loadChildren at it
Answer: B
Use loadComponent: () => import("./page").then(m => m.PageComponent) for a single page. Instead of monkey-patching every async API to know when to check, Angular relies on explicit signals: a signal changes, an event binding in the template, the async pipe, markForCheck(). The trade-off is a smaller bundle and fewer redundant checks, but every state update coming from outside (third-party libraries, plain callbacks) must emit a signal itself.
For a complex form, do you pick Reactive Forms or Template-driven Forms, and why?
A.Reactive Forms — the form structure is defined in the class so it is testable
B.You should use both together in the same form to get each one's advantages
C.They are equally capable, differing only in where things are declared
D.Template-driven — less code to write, so it is always the better choice
Answer: A
For a complex form, use Reactive Forms: the structure is defined in code — field initializer, constructor, or factory — but because it's a function it can be used in functional guards, interceptors, and shared utility functions. The code is also cleaner with inheritance since you don't have to forward the parent class's constructor parameters.
How does the viewChild() signal query differ from the traditional @ViewChild?
A.It only works with components, not directives
B.It returns a Signal, read by calling it
C.It can also find elements inside projected content
D.It re-runs the query on every change detection cycle
Answer: B
It returns a signal, so you can read it at any time by calling it. The old way forced you to read it in a lifecycle hook after the view initialized — read earlier and the value is still empty, a very common bug.
A.Loading a component from another module on demand
B.Rendering an ng-template that was passed in, with an optional context
C.Defining a shared template for several components
D.Inserting raw HTML from a string into the template
Answer: B
It renders a template passed in, along with an optional context object. That lets a table component leave cell rendering up to the consumer, while the table itself keeps its pagination and sorting logic.
What is the host property in a component decorator for?
A.Declaring which pages the component may be embedded in
B.Attaching classes, attributes and event listeners to the component's own element
C.Choosing the root element created for the component
D.Configuring how the component talks to its parent
Answer: B
It attaches CSS classes, attributes, and event listeners to the component's own element. You avoid an extra wrapper tag used only to host a class or catch an event — a cleaner DOM tree.
A component's CSS does not affect other components by default. Why?
A.The CSS is loaded in its own iframe per component
B.Angular renames the classes to random hashes
C.Each component is rendered inside its own shadow DOM
D.Angular adds a unique attribute to the element and to the selector
Answer: D
The framework adds a unique attribute to the component's elements and to the matching CSS selectors. This mimics scoped isolation without real shadow DOM, so compatibility is broader.
A.A two-way signal: both an input and an automatically emitted matching output
B.A read-only signal for exposing state out of the component
C.A form control bound to a template-driven form
D.A data model class for defining an entity's shape
Answer: A
A two-way signal: it both receives a value from the parent component as an input and emits the corresponding event when written to. Consumers use two-way binding syntax instead of hand-writing an input/output pair.
C.Only when an expression in the component returns true
D.Idle, viewport entry, interaction, hover, immediate, timer, or when true
Answer: D
Several conditions: when the block enters the viewport, when the user interacts or hovers, when the browser is idle, after a time period, or by a custom expression. Multiple conditions can be combined at once.
A.When reading a signal without wanting the effect to re-run because of it
B.When the effect is declared outside an injection context
C.When the effect must run synchronously instead of being scheduled
D.When you need to write to a signal from inside an effect
Answer: A
When you need to read a signal's value without the effect re-running because of it. Without it, every signal read inside the effect becomes a dependency and the effect re-runs more than necessary.
How does markForCheck() differ from detectChanges()?
A.The first is synchronous while the second is asynchronous
B.The first goes with the default strategy and the second with OnPush
C.The first checks only the current component while the second checks the whole application
D.The first marks the component for the next cycle; the second runs a check immediately
Answer: D
The first marks the component and its ancestors as needing a check in the next cycle. The latter runs a check immediately on the current subtree. The first is the default choice because it lets the framework batch the changes.
An OnPush component receives @Input() items: Item[]. What happens when an item is pushed?
A.The UI updates but one cycle late
B.Angular throws an error because the input was mutated from outside
C.The UI updates normally because Angular tracks the array's contents
D.The UI does not update because the array reference is unchanged
Answer: D
The UI does not update. This strategy compares the input's reference, and mutating an array in place keeps the same reference. The fix is to create a new array instead of mutating in place.
A.Creating an encryption key shared between services
B.Marking a service as an application-wide singleton
C.Serving as a DI key for non-class values: configuration, constants, interfaces
D.Authenticating the user before allowing a service to be injected
Answer: C
To serve as a dependency injection key for things that aren't classes: config objects, constants, or an interface. Interfaces are erased at compile time so they can't be keys, and strings risk name collisions between libraries.
How do useClass, useValue, useFactory and useExisting differ?
A.By how long the produced value lives
B.By which provider wins when several share a token
C.By how the value is produced: a new class, an existing value, a factory, or an alias
D.By whether the value can be tree-shaken
Answer: C
By how the value is created. The first instantiates a class. The second returns an existing value. The third calls a factory function that receives dependencies. The fourth is an alias pointing at another provider.
Calling inject() inside an async callback errors. Why?
A.It does not work with services declared providedIn: "root"
B.It can only be called in an injection context, that is during initialization
C.It conflicts with constructor injection if both are used
D.It must be called inside a specific lifecycle hook
Answer: B
Because it can only be called inside an injection context — constructor body, field initializer, provider factory function, and similar places. Afterwards the context is gone, so the framework doesn't know which injector to use.
Why avoid direct DOM manipulation through ElementRef.nativeElement?
A.Angular does not allow accessing that property
B.It stops change detection from noticing the change
C.Direct manipulation is always slower than going through the template
D.It ties the code to the browser environment, so it breaks under SSR
Answer: D
It ties the code to the browser environment, so it breaks during server-side rendering, where there is no real DOM. It also opens the door to injection vulnerabilities if unsanitized content is written.
How does Angular automatically prevent XSS in templates?
A.It blocks every script tag across the whole application
B.It escapes every interpolated value and sanitizes values bound to innerHTML
C.It requires declaring a Content Security Policy in the configuration
D.It validates the data on the server before sending it to the template
Answer: B
It escapes every interpolated value in the template, and sanitizes values bound into dangerous contexts such as HTML content or link URLs. Every value is treated as untrusted by default.
What is the performance impact of a pipe with pure: false?
A.It runs asynchronously so the result arrives one cycle late
B.It re-runs on every change detection cycle, not only when its input changes
C.It blocks change detection for child components
D.It is not cached so it uses more memory
Answer: B
It re-runs on every change detection cycle, not only when an input reference changes. With a list of a thousand elements, the pipe runs a thousand times per cycle — enough to make the UI visibly janky.
Angular 16+ recommends provideX() over XModule.forRoot(). What is the benefit?
A.It forces every component to be standalone
B.It allows changing providers at runtime
C.Faster startup because the module resolution step is skipped
D.Tree-shakable: the unused parts are dropped from the bundle
Answer: D
These functions are tree-shakable: the bundler can see which features are called and drop the rest. A module bundles everything into one block, so the bundler can't tell what is safe to remove.
What value should the track expression use in @for?
A.The item object itself, compared by reference
B.A stable, unique identifier for each item
C.A random value generated on each render
D.The item's index in the array, since it is always available
Answer: B
A stable and unique identifier for each item — usually the primary key from the database. Using the index means that when an item is inserted at the front of the list, every item is considered changed and the DOM is recreated entirely.
What breaks when reading a route param via snapshot while navigating between /user/1 and /user/2?
A.The parameter becomes an empty string instead of the new value
B.The component is reused, so the old value stays
C.The router throws an error because the parameter changed mid-flight
D.The component is rebuilt so its current state is lost
Answer: B
The component is reused when only the parameter changes, so the snapshot is only correct at the first initialization. The fix is to subscribe to the parameter stream, or enable linking the parameter to the component's input.
How does a functional guard (Angular 15+) differ from a class-based guard?
A.It can also intercept HTTP requests, not just navigation
B.It is a plain function using inject(), with no class or decorator
C.It runs on the server while the class-based one runs on the client
D.It need not return a value because the router infers one
Answer: B
It is a function that typically uses dependency injection inside, with no class or decorator needed. This lets you compose multiple small guards by nesting calls, instead of building a class inheritance tree.
What is a route resolver for, and what is the trade-off?
A.Checking permissions before allowing entry to the route
B.Fetching data before entering the route; in exchange the user waits on the old page
C.Resolving a dynamic path into the matching component
D.Preloading the route's bundle to make navigation faster
Answer: B
It fetches data before entering the route, so the page appears with data already loaded and no empty-state flash. The trade-off is that the user waits on the previous page — it feels like nothing happens for a moment after clicking.
What does the router's preloading strategy decide?
A.Which components are kept in memory when leaving a route
B.When the bundles of lazy routes not yet visited are downloaded
C.Which routes are prerendered on the server
D.The order in which routes are registered in the configuration
Answer: B
It decides when to load the bundles of lazy routes the user hasn't visited yet. Loading everything right after startup loses the benefit of lazy loading; not preloading means the first visit waits for the bundle to load.
What benefit do Typed Reactive Forms (Angular 14+) bring?
A.The form validates itself from the declared TypeScript types
B.The form's values get concrete types instead of any, catching mistakes at compile time
C.The form is generated automatically from an existing interface
D.The form converts data types automatically as the user types
Answer: B
The form's value has a specific type instead of any, so the compiler catches errors when reading a control through the typed forms API or using the wrong value type. Previously these errors only surfaced at runtime as empty values.
A.When several controls need validating by the same rule
B.When one control must hold several values at once
C.When the number of controls changes at runtime
D.When the form is split into several steps
Answer: C
When the number of controls changes at runtime — a list of beneficiaries, the line items of an invoice, multiple phone numbers. A normal group has fixed keys declared at coding time, so elements can't be added or removed.
What must an async validator checking email uniqueness watch for?
A.It must return a synchronous value when the check completes quickly
B.It must be registered at the form level rather than the control level
C.Debouncing and cancelling the previous request; it runs after the sync validators pass
D.It must run before the synchronous validators to save requests
Answer: C
It needs to throttle call frequency and cancel the old request when a new value arrives. One built-in advantage: the framework only runs the async validator after all sync validators pass — so a bad format costs no request.
How is a functional interceptor (Angular 15+) registered?
A.Declare a multi-value provider with the corresponding token
B.Pass an array of functions to withInterceptors() when providing HttpClient
C.Add a decorator to the function and let the framework discover it
D.Register it in the route configuration of the routes to intercept
Answer: B
Pass an array of functions into a configuration function when declaring the HTTP client. The order in the array is the execution order — so the position of the token-attaching interceptor relative to the logging interceptor needs consideration.
Which tool should be used to test a service making HTTP calls?
A.Run a fake server on a local port during the test
B.Replace HttpClient with a hand-written fake object
C.HttpTestingController — intercept at the HttpClient layer and declare the responses
D.Call the real API but point at a test environment
Answer: C
The framework's HttpTestingController. It intercepts at the HTTP client layer, letting you declare responses and verify the request itself — path, method, headers and body — not just check the result.
A.The former emits synchronously while the latter emits asynchronously
B.The latter holds a current value and emits it immediately to new subscribers
C.The latter completes itself after emitting its first value
D.The latter allows only one subscriber at a time
Answer: B
The latter holds the current value and emits it immediately to new subscribers, while the former does not. With the former, anyone subscribing after a value has been emitted gets nothing until the next emission.
B.Build a small DI environment, create the component, swap providers
C.Measuring the test suite's code coverage
D.Generating fake data for the tests
Answer: B
It sets up a miniature dependency injection environment: declare the needed providers, create the component, and swap real services for fakes. That lets you test the component without modifying its own code.
What problem do Angular CDK Component Harnesses solve in tests?
A.Measuring each component's rendering performance
B.Generating tests automatically from a component's definition
C.Running tests across several browsers at once
D.Testing interactions through a stable API instead of brittle CSS selectors
Answer: D
They let tests interact through a stable API — open a menu, select an item, read a value — instead of finding elements with CSS selectors. Changing the component's internal DOM structure then won't break the test.
What does the application builder (esbuild) bring over the older builder?
A.It replaces the Angular CLI with a new tool
B.It removes the TypeScript compilation step entirely
C.Much faster builds and SSR folded into the same builder
D.It lets the application run without a build
Answer: C
Much faster builds thanks to a bundler written in Go, and it folds server-side rendering into the same build pipeline. Before, configuring server rendering required a separate builder and many manual steps.
C.Warning or failing the build when a bundle exceeds a size threshold
D.Capping the maximum time the build may take
Answer: C
They warn or fail the build when bundle size exceeds a preset threshold. Without them, the bundle creeps up with every added library and nobody notices until the page is noticeably slow.
What does incremental hydration in modern Angular allow?
A.Hydrating components gradually in DOM order
B.Splitting hydration across several frames so it does not block the UI
C.Hydrating only the parts that are interacted with, leaving the rest as static HTML
D.Skipping hydration entirely and running like a static page
Answer: C
It only hydrates the parts the user actually interacts with, leaving the rest as static HTML from the server. Hydrating the whole page costs a lot of CPU time on weak devices, even though most of the content isn't interactive.
A.Named outlets can only be used at the root route level
B.Child routes are for lazy loading while named outlets are for eager loading
C.Child routes nest in the URL; named outlets render in parallel at their own position
D.Child routes share a component while named outlets create a new one
Answer: C
Child routes nest by path: the parent path plus the child path, and the child component renders inside the parent component's outlet. A named outlet renders in parallel at a separate location, and appears in the path as a parenthesized auxiliary segment.
What does watching a form's valueChanges for autosave need?
A.You must call the value-update method after every change
B.The form must be converted to template-driven to be observable
C.Just subscribe and call the save API in the handler
D.Debouncing, dropping duplicate values, and unsubscribing when the component is destroyed
Answer: D
Three things: debounce so you don't save on every keystroke, drop duplicate values, and unsubscribe when the component is destroyed. Missing the last one is one of the most common sources of memory leaks.
How should an older Angular project migrate to standalone components?
A.No migration is needed; NgModule is supported forever
B.Delete every NgModule and fix the compilation errors that follow
C.Create a new project and copy the components over one at a time
D.Run the CLI's migration schematics step by step
Answer: D
Run the CLI conversion schematics in three steps: convert components to standalone, remove the no longer needed modules, then bootstrap the application without NgModule.
