Angular Developer Certification Exam — Questions and Answers

Question 1: What is the difference between `setValue()` and `patchValue()` on a FormGroup?

setValue() requires all controls to be provided; patchValue() allows partial updates (Correct answer)
They are identical in behavior
setValue() is async; patchValue() is synchronous
patchValue() throws if a key is missing; setValue() does not

Correct answer: setValue() requires all controls to be provided; patchValue() allows partial updates

`setValue()` requires an object with keys matching every control, while `patchValue()` only updates the provided keys.

Question 2: Which provider syntax uses an existing service instance to satisfy a different token?

{ provide: X, useClass: Y }
{ provide: X, useExisting: Y } (Correct answer)
{ provide: X, useFactory: () => new Y() }
{ provide: X, useValue: Y }

Correct answer: { provide: X, useExisting: Y }

useExisting creates an alias so that token X resolves to the same instance already registered under token Y.

Question 3: Which NgRx building block is a pure function that takes the current state and an action, and returns a new state?

Effect
Action
Reducer (Correct answer)
Selector

Correct answer: Reducer

A reducer is a pure function (state, action) => newState that never mutates the existing state object.

Question 4: In an Angular lazy-loaded route configuration, what does the loadChildren property accept in modern Angular (v9+)?

A string path to the module file using the '#' syntax
A factory function that creates a module synchronously
A reference to the NgModule class directly
A dynamic import() returning a module with routing (Correct answer)

Correct answer: A dynamic import() returning a module with routing

Modern Angular uses dynamic import() syntax like () => import('./feature/feature.module').then(m => m.FeatureModule) for lazy loading.

Question 5: How does Angular determine whether an async validator is still pending?

The isPending property is true
The control's status is 'INVALID'
The asyncStatus$ emits 'loading'
The control's status is 'PENDING' (Correct answer)

Correct answer: The control's status is 'PENDING'

While async validators are running, the control's `status` property is set to `'PENDING'`.

Question 6: What does enabling `ivy` (the default since Angular 9) improve compared to the legacy View Engine?

Only adds debuggability features
Smaller bundles, faster compilation, and better tree-shaking through locality principle (Correct answer)
Replaces TypeScript with JavaScript
SCSS compilation speed only

Correct answer: Smaller bundles, faster compilation, and better tree-shaking through locality principle

Ivy compiles each component independently (locality), enabling better tree-shaking, smaller bundles, and faster incremental rebuilds.

Question 7: What is the role of the Angular CLI's esbuild-based builder introduced in Angular 17?

Generates API documentation
Provides significantly faster build and rebuild times replacing Webpack (Correct answer)
Lints TypeScript files
Runs Karma tests faster

Correct answer: Provides significantly faster build and rebuild times replacing Webpack

Angular 17's application builder uses esbuild for up to 72% faster production builds and near-instant incremental rebuilds during development.

Question 8: What is the effect of calling `control.clearValidators()` followed by `control.updateValueAndValidity()`?

Removes all sync validators and immediately re-evaluates the control, making it valid (Correct answer)
Throws an error if the control currently has errors
Only affects async validators
Removes validators but keeps the existing error map until the next user interaction

Correct answer: Removes all sync validators and immediately re-evaluates the control, making it valid

`clearValidators()` detaches all sync validators, and `updateValueAndValidity()` forces re-evaluation so the control becomes valid (assuming no async errors).

Question 9: How do you inject a service into an Angular component using the modern inject() function (Angular 14+)?

providers: [MyService] inside @Component
this.service = new MyService();
@Inject(MyService) service: MyService;
private service = inject(MyService); (Correct answer)

Correct answer: private service = inject(MyService);

The inject() function, called in an injection context (constructor or field initializer), retrieves the service from the current injector without constructor parameter syntax.

Question 10: What is the recommended Angular approach for preventing broken links during single-page app navigation?

Disable Angular Router and use href links
Cache all routes in localStorage
Use PathLocationStrategy with server-side fallback returning index.html for unknown routes (Correct answer)
Use HashLocationStrategy in all cases

Correct answer: Use PathLocationStrategy with server-side fallback returning index.html for unknown routes

PathLocationStrategy produces clean URLs, but requires the server to return index.html for all non-asset routes to prevent 404s on direct navigation.

Question 11: What is the purpose of the `preconnect` link hint added to index.html for Angular apps using Google Fonts?

Caches fonts in Service Worker
Prefetches font files entirely
Inlines font CSS
Establishes early TCP/TLS connections to the font server, reducing latency (Correct answer)

Correct answer: Establishes early TCP/TLS connections to the font server, reducing latency

rel="preconnect" tells the browser to open a connection to the font origin early, cutting the round-trip cost when the font request actually fires.

Question 12: What Angular CLI tool analyzes bundle sizes and shows which modules contribute most to the output?

ng e2e
ng serve --stats-json + webpack-bundle-analyzer (Correct answer)
ng lint
ng test

Correct answer: ng serve --stats-json + webpack-bundle-analyzer

Running ng build --stats-json and then webpack-bundle-analyzer dist/stats.json visualizes the bundle composition to identify large dependencies.

Question 13: What is the Angular Router?

A server-side request routing system
A module that maps URL paths to components, enabling single-page application navigation (Correct answer)
A CSS layout grid system
A network router configuration tool

Correct answer: A module that maps URL paths to components, enabling single-page application navigation

The Angular Router maps URL paths to specific components, enabling navigation between different views in a single-page application without full page reloads.

Question 14: What problem does the `NgZone.runOutsideAngular()` method solve?

It executes code in a worker thread
It disables all RxJS subscriptions for the duration of the callback
It prevents a component's template from rendering
It runs code without triggering Angular's change detection, avoiding unnecessary UI checks for frequent events like scroll or mousemove (Correct answer)

Correct answer: It runs code without triggering Angular's change detection, avoiding unnecessary UI checks for frequent events like scroll or mousemove

Running high-frequency event handlers outside Angular's zone stops them from triggering change detection on every event, significantly improving performance.

Question 15: How should you send a JavaScript object as a JSON body in an HttpClient.post() request?

Pass the plain object as the body argument; Angular serializes it automatically (Correct answer)
Always call JSON.stringify() and manually set Content-Type header
Use HttpParams to encode the object as form fields
Wrap it in FormData before passing it

Correct answer: Pass the plain object as the body argument; Angular serializes it automatically

HttpClient detects a plain object body, serializes it to JSON, and sets the Content-Type: application/json header automatically.

Question 16: In Angular, when is it appropriate to call `Injector.create()` to build a child injector manually?

To replace TestBed in unit tests
To register services after the app has bootstrapped using NgZone
When you need a scoped injector outside the normal component tree, such as in a dynamic component scenario (Correct answer)
To register application-wide services at startup

Correct answer: When you need a scoped injector outside the normal component tree, such as in a dynamic component scenario

Injector.create() is used to build ad-hoc child injectors with custom providers, useful when dynamically creating components or services outside Angular's normal hierarchy.

Question 17: In Angular's default change detection, what triggers the detection cycle?

Only input property changes
Async events like DOM events, timers, and HTTP responses via Zone.js (Correct answer)
Only manual calls to detectChanges()
Only HTTP responses

Correct answer: Async events like DOM events, timers, and HTTP responses via Zone.js

Zone.js patches async APIs so Angular is notified whenever any async event completes, triggering a top-down change detection pass.

Question 18: Which directive would you use to repeat a block of HTML for each item in an array in Angular 17+ with the new built-in control flow?

*ngRepeat
@for (Correct answer)
*ngFor
ngRepeat

Correct answer: @for

Angular 17 introduced the @for built-in control flow block as the modern replacement for the *ngFor structural directive.

Question 19: What is an Observable in Angular/RxJS?

A visual component for displaying data
A lazy collection of values that can emit multiple items over time and be subscribed to (Correct answer)
A CSS animation sequence
A database query result set

Correct answer: A lazy collection of values that can emit multiple items over time and be subscribed to

An Observable represents a stream of values over time, producing data only when subscribed to (lazy evaluation), and can emit zero or more values before completing or erroring.

Question 20: What is the role of `HttpTestingController` in Angular testing?

It intercepts HTTP requests and allows asserting their parameters and flushing responses (Correct answer)
It validates HTTP headers on outgoing API calls
It mocks the router navigation during tests
It replaces the entire HttpClient with a no-op stub

Correct answer: It intercepts HTTP requests and allows asserting their parameters and flushing responses

HttpTestingController lets tests verify that specific HTTP requests were made and manually control the responses returned to the service under test.

Question 21: Which Karma configuration option specifies which browsers to use when running Angular tests?

browsers (Correct answer)
runners
agents
targets

Correct answer: browsers

The browsers array in karma.conf.js (e.g., ['Chrome', 'ChromeHeadless']) controls which browser environments Karma launches for test execution.

Question 22: What career advancement paths exist for Angular certified professionals?

Advancement requires leaving the field entirely
Only changing careers provides advancement
No advancement is possible beyond initial certification
Leadership roles, specialized consulting, education and training, and executive management positions (Correct answer)

Correct answer: Leadership roles, specialized consulting, education and training, and executive management positions

Certified professionals can advance through specialization, leadership roles, consulting, academic/training positions, and executive management within their field.

Question 23: What is the role of a Resolve guard in Angular routing?

It pre-fetches route data before the component is activated (Correct answer)
It prevents navigation until the user resolves a conflict
It resolves route parameter types to their primitive values
It determines whether a lazy-loaded module can be loaded

Correct answer: It pre-fetches route data before the component is activated

A Resolve guard fetches data before the route is activated, making that data available via ActivatedRoute.data when the component renders.

Question 24: What is the purpose of the `--code-coverage` flag in `ng test`?

It enforces a minimum test pass rate before the build continues
It generates a coverage report showing which lines and branches are exercised by tests (Correct answer)
It runs tests in headless mode only
It outputs a JSON file of all test results for CI parsing

Correct answer: It generates a coverage report showing which lines and branches are exercised by tests

Passing --code-coverage instructs Istanbul/NYC to instrument the source and produce an HTML/JSON coverage report under the coverage/ directory.

Question 25: Which function converts an RxJS Observable into an Angular Signal?

toSignal() (Correct answer)
fromSignal()
signalFrom()
toObservable()

Correct answer: toSignal()

toSignal() from @angular/core/rxjs-interop subscribes to an Observable and exposes its latest value as a Signal.

Question 26: Which Angular feature would you use to share state between sibling components without a shared parent component or a service?

Route resolvers
Input/Output bindings
A shared singleton service with a BehaviorSubject or Signal (Correct answer)
ViewEncapsulation.None

Correct answer: A shared singleton service with a BehaviorSubject or Signal

A singleton service holding a BehaviorSubject or Signal acts as a shared state store that any component can inject, read, and write regardless of their position in the component tree.

Question 27: Which `providers` syntax allows you to supply a pre-constructed object or primitive value directly?

{ provide: TOKEN, useClass: MyClass }
{ provide: TOKEN, useFactory: factoryFn }
{ provide: TOKEN, useExisting: OtherToken }
{ provide: TOKEN, useValue: myObject } (Correct answer)

Correct answer: { provide: TOKEN, useValue: myObject }

useValue registers a static, pre-built value with the injector so no factory or class instantiation occurs.

Question 28: What is the purpose of `jasmine.createSpyObj()` in Angular unit tests?

It creates a full deep clone of an Angular service
It creates a mock object with multiple named spy methods in one call (Correct answer)
It generates type-safe stubs from TypeScript interfaces
It registers a spy that tracks all property accesses

Correct answer: It creates a mock object with multiple named spy methods in one call

jasmine.createSpyObj('ServiceName', ['method1', 'method2']) returns an object where each listed method is already a Jasmine spy, simplifying dependency mocking.

Question 29: In NgRx, which construct handles side effects such as HTTP calls and dispatches new actions on completion?

Selector
Store
Reducer
Effect (Correct answer)

Correct answer: Effect

NgRx Effects listen for dispatched actions, perform side effects, and optionally dispatch new actions back to the store.

Question 30: What is the correct way to multicast an Observable to multiple subscribers using a single execution in RxJS?

Call subscribe() multiple times on the same Observable
Use the share() operator (Correct answer)
Convert it to a Promise with toPromise()
Wrap it in a new Observable using new Observable()

Correct answer: Use the share() operator

share() wraps the source in a Subject and multicasts it so all subscribers share one underlying execution rather than triggering separate ones.

Question 31: What does the `host` property in a @Component decorator allow you to configure?

Host element bindings and listeners (Correct answer)
Child component selectors
Template URL paths
Dependency injection tokens

Correct answer: Host element bindings and listeners

The `host` property maps DOM events and property bindings directly onto the component's host element.

Question 32: Which operator would you use to handle errors by retrying the source Observable a fixed number of times?

retryWhen
catchError
onErrorResumeNext
retry (Correct answer)

Correct answer: retry

retry(n) resubscribes to the source Observable up to n times when it errors before propagating the error.

Question 33: What Angular Universal package enables server-side rendering to improve initial load performance and SEO?

@angular/pwa
@angular/platform-browser
@angular/core
@angular/universal / @angular/ssr (Correct answer)

Correct answer: @angular/universal / @angular/ssr

@angular/ssr (formerly Angular Universal) renders the Angular app on the server, returning complete HTML to the browser for faster First Contentful Paint.

Question 34: What is tree-shakable about a service declared with `@Injectable({ providedIn: 'root' })`?

The service is excluded from the bundle if nothing in the app injects it (Correct answer)
The service is split into smaller chunks by the router
The service's methods are removed if they are never called
The service is removed if its NgModule is not imported

Correct answer: The service is excluded from the bundle if nothing in the app injects it

Because the provider registration lives on the service class itself rather than in an NgModule, bundlers can detect unused services and omit them from the output.

Question 35: What Angular token is used with `multi: true` to run initialization logic before the app bootstraps?

APP_INITIALIZER (Correct answer)
DOCUMENT
APP_BOOTSTRAP_LISTENER
PLATFORM_INITIALIZER

Correct answer: APP_INITIALIZER

APP_INITIALIZER accepts factory functions via multi: true; Angular awaits any returned Promises before rendering the first component.

Question 36: Which Angular SSR strategy pre-renders pages at build time for immediate static HTML delivery?

Server-side rendering on request
Deferred loading
Static site generation (prerendering) (Correct answer)
Client-side rendering

Correct answer: Static site generation (prerendering)

Angular's prerender feature (ng-universal or Angular 17+ built-in) generates static HTML files at build time for instant first-paint.

Question 37: Which RxJS operator transforms each emitted value into an Observable and flattens only the most recent inner Observable, canceling previous ones?

mergeMap
concatMap
exhaustMap
switchMap (Correct answer)

Correct answer: switchMap

switchMap unsubscribes from the previous inner Observable when a new source value arrives, making it ideal for cancellable requests like autocomplete.

Question 38: What value does `formControl.value` return when the control is disabled?

The current value is still returned (Correct answer)
null
undefined
An empty string

Correct answer: The current value is still returned

A disabled control retains its value; `formControl.value` still returns the current value even when disabled.

Question 39: What is the difference between template-driven and reactive forms in Angular?

Reactive forms cannot handle validation
Template-driven is for mobile; reactive is for desktop
Template-driven uses directives in HTML; reactive uses explicit form model in TypeScript (Correct answer)
They are identical approaches

Correct answer: Template-driven uses directives in HTML; reactive uses explicit form model in TypeScript

Template-driven forms use ngModel directives in the template for two-way binding, while reactive forms create an explicit form model in the component class, offering more control and testability.

Question 40: What happens when a CanActivate guard returns an UrlTree instead of false?

An error is thrown at runtime
Navigation proceeds normally to the requested route
Navigation is cancelled and the router redirects to the URL represented by the UrlTree (Correct answer)
Navigation is cancelled and no redirect occurs

Correct answer: Navigation is cancelled and the router redirects to the URL represented by the UrlTree

Returning a UrlTree from a guard cancels the current navigation and immediately starts a new navigation to the URL encoded in that UrlTree.

Question 41: What is a FormGroup in reactive forms?

A team of developers working on form features
A database table for storing form submissions
A group of HTML form elements with no functional relationship
A collection of FormControls that tracks their combined value and validation status (Correct answer)

Correct answer: A collection of FormControls that tracks their combined value and validation status

FormGroup aggregates multiple FormControls into a single object, tracking the collective value and validation status, making it easy to manage forms with multiple fields.

Question 42: Why is it important to unsubscribe from Observables?

To reset the Observable to its initial value
To prevent memory leaks by cleaning up subscriptions that are no longer needed (Correct answer)
Unsubscribing is never necessary in Angular
To improve the speed of the Observable

Correct answer: To prevent memory leaks by cleaning up subscriptions that are no longer needed

Failing to unsubscribe from Observables (especially those that don't complete naturally) creates memory leaks, as the subscription continues holding references and processing emissions.

Question 43: In Angular testing, what is the difference between `DebugElement.query()` and `DebugElement.queryAll()`?

query() searches only direct children; queryAll() searches all descendants
query() uses CSS selectors; queryAll() uses XPath
query() is synchronous; queryAll() returns a Promise
query() returns the first matching DebugElement; queryAll() returns an array of all matches (Correct answer)

Correct answer: query() returns the first matching DebugElement; queryAll() returns an array of all matches

query() finds the first DebugElement matching a predicate (like By.css()), while queryAll() returns every matching DebugElement in the subtree.

Question 44: What NgRx operator is used inside createEffect() to handle errors without killing the effect stream?

catchError with EMPTY or of() (Correct answer)
throwError()
retry()
finalize()

Correct answer: catchError with EMPTY or of()

Using catchError inside the inner Observable (not the outer stream) and returning EMPTY or a fallback action keeps the effect alive after an error.

Question 45: What does the Angular CLI schematic `ng generate` enforce by default to ensure consistency?

Strict mode TypeScript
Consistent file naming and folder structure per Angular style guide (Correct answer)
Component-only architecture
Barrel imports

Correct answer: Consistent file naming and folder structure per Angular style guide

ng generate schematics follow the Angular style guide naming conventions (kebab-case files, PascalCase classes) by default.

Question 46: In a lazy-loaded module, where is a service provided if it is listed in that module's `providers` array?

A platform injector shared across all apps on the page
A child injector created specifically for that lazy module (Correct answer)
The root injector, shared with all modules
The component injector of the module's root component

Correct answer: A child injector created specifically for that lazy module

Lazy-loaded modules get their own child injector, so services provided there are isolated to that module and not shared with the rest of the application.

Question 47: What does the router's NavigationExtras.replaceUrl option do?

It updates the current URL without adding a new entry to the browser history stack (Correct answer)
It strips query parameters from the URL during navigation
It replaces the entire Angular route configuration at runtime
It changes the base URL of the application

Correct answer: It updates the current URL without adding a new entry to the browser history stack

Setting replaceUrl: true in NavigationExtras causes the router to replace the current browser history entry instead of pushing a new one.

Question 48: What does the RxJS `catchError` operator do when the source Observable errors?

Completes the stream silently
Logs the error to the console
Returns a new Observable or rethrows the error (Correct answer)
Retries the source Observable automatically

Correct answer: Returns a new Observable or rethrows the error

catchError intercepts an error and lets you return a fallback Observable or rethrow it as a new error.

Question 49: What is a component in Angular?

A TypeScript class with an HTML template and optional CSS that controls a portion of the UI (Correct answer)
A server-side API endpoint
A CSS framework for styling
A database model for storing application data

Correct answer: A TypeScript class with an HTML template and optional CSS that controls a portion of the UI

An Angular component is a TypeScript class decorated with @Component that defines a selector, template (HTML), and styles (CSS), managing a specific portion of the user interface.

Question 50: Which Angular feature introduced in v14+ allows defining routes without NgModules by using standalone components?

StandaloneRouterModule.forRoot()
RouterDirective standalone import
RouterModule.forStandalone()
provideRouter() in bootstrapApplication() (Correct answer)

Correct answer: provideRouter() in bootstrapApplication()

In standalone Angular apps, provideRouter() is passed to bootstrapApplication() providers to configure routing without any NgModule.

Angular Developer Certification Exam

The Angular Developer Certification, created by Google Developer Experts via certificates.dev, validates proficiency in building Angular applications including components, services, routing, forms, RxJS, state management, and testing.

Questions

60 min

Time Limit

70%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds