Angular Developer Certification Exam — Questions and Answers

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

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

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 2: What happens when a CanActivate guard returns an UrlTree instead of false?

Navigation is cancelled and the router redirects to the URL represented by the UrlTree (Correct answer)
An error is thrown at runtime
Navigation proceeds normally to the requested route
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 3: What is the role of the `@Self()` decorator in Angular DI?

It marks a service as a singleton
It creates a new instance of the service for each use
It restricts resolution to the injector of the current element, never walking up to parent injectors (Correct answer)
It injects the current component instance into itself

Correct answer: It restricts resolution to the injector of the current element, never walking up to parent injectors

@Self() tells Angular to look for the dependency only in the host element's injector and throw if it's not found there.

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

It resolves route parameter types to their primitive values
It prevents navigation until the user resolves a conflict
It pre-fetches route data before the component is activated (Correct answer)
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 5: Which provider syntax uses an existing service instance to satisfy a different token?

{ provide: X, useFactory: () => new Y() }
{ provide: X, useClass: Y }
{ provide: X, useExisting: Y } (Correct answer)
{ 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 6: Which tool does Angular use internally to enforce coding style and detect anti-patterns via static analysis?

JSHint
SonarQube
Prettier
ESLint with @angular-eslint rules (Correct answer)

Correct answer: ESLint with @angular-eslint rules

Angular projects use ESLint extended with `@angular-eslint` rules to enforce Angular-specific coding conventions and detect anti-patterns.

Question 7: Which Subject type in RxJS replays a specified number of past emissions to new subscribers?

AsyncSubject
ReplaySubject (Correct answer)
BehaviorSubject
PublishSubject

Correct answer: ReplaySubject

ReplaySubject buffers a configurable number of emissions and replays them to any new subscriber.

Question 8: What is the Angular `Renderer2` class used for, and why is it preferred over directly manipulating the DOM?

It provides a platform-agnostic API for DOM manipulation, enabling server-side rendering and web worker compatibility (Correct answer)
It is a faster replacement for querySelector in large component trees
It automatically batches DOM updates to reduce repaints
It enables two-way binding without using ngModel

Correct answer: It provides a platform-agnostic API for DOM manipulation, enabling server-side rendering and web worker compatibility

Renderer2 abstracts DOM operations so that Angular code can run in environments without a real DOM (like SSR with Angular Universal or Web Workers) without modification.

Question 9: Which FormGroup method returns the raw value including disabled controls?

getValue()
rawValue property
getRawValue() (Correct answer)
getAll()

Correct answer: getRawValue()

`FormGroup.getRawValue()` returns the values of all controls including those that are disabled.

Question 10: Which Angular Router guard interface should you implement to prevent a user from leaving a form with unsaved changes?

Resolve
CanDeactivate (Correct answer)
CanActivate
CanLoad

Correct answer: CanDeactivate

CanDeactivate is called before leaving a route and can prompt the user to confirm navigation away from unsaved data.

Question 11: What does the `scan` operator do in RxJS?

Samples the stream at a regular interval
Groups emissions into fixed-size arrays
Filters values based on a cumulative condition
Accumulates values over time like Array.reduce and emits each intermediate result (Correct answer)

Correct answer: Accumulates values over time like Array.reduce and emits each intermediate result

scan applies an accumulator function to each emission and emits the running total, similar to reduce but streaming intermediate results.

Question 12: Which Angular Router configuration option controls whether the router should use HTML5 pushState or hash-based URLs?

router.useHashUrls() method
hashMode: true in RouterModule.forRoot()
urlStrategy in RouterModule.forRoot()
LocationStrategy provided via useClass in providers (Correct answer)

Correct answer: LocationStrategy provided via useClass in providers

Providing HashLocationStrategy using { provide: LocationStrategy, useClass: HashLocationStrategy } switches routing to hash-based URLs (#/path) instead of HTML5 pushState.

Question 13: Which Angular directive efficiently re-renders only changed items in a list by tracking identity?

async pipe
*ngIf
*ngSwitch
*ngFor with trackBy (Correct answer)

Correct answer: *ngFor with trackBy

*ngFor with a trackBy function lets Angular identify which list items changed, avoiding full DOM re-creation on each update.

Question 14: Which Angular strategy checks only the current component and its ancestors when an input reference changes?

Default
Detached
OnPush (Correct answer)
Manual

Correct answer: OnPush

OnPush change detection only runs for a component when its input references change, an event originates from it, or an async pipe resolves.

Question 15: Which Angular testing utility configures providers for dependency injection in unit tests?

TestBed.overrideProvider()
TestBed.configureTestingModule() (Correct answer)
TestBed.createComponent()
TestBed.inject()

Correct answer: TestBed.configureTestingModule()

TestBed.configureTestingModule() sets up the testing module, including the providers array where you register real or mock services.

Question 16: 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 17: What is the role of the Angular CLI's esbuild-based builder introduced in Angular 17?

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

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 18: How can you share a single HTTP request result among multiple subscribers without triggering duplicate network calls?

Subscribe manually and feed results into a BehaviorSubject
Pipe the observable through shareReplay(1) (Correct answer)
Enable response caching in the HttpClientModule import options
Use HttpClient.share() built-in method

Correct answer: Pipe the observable through shareReplay(1)

shareReplay(1) multicasts the observable, executes the HTTP request once, and replays the cached response to any late subscribers.

Question 19: Which operator converts a higher-order Observable (Observable of Observables) into a first-order Observable using merge strategy?

concatAll
exhaustAll
mergeAll (Correct answer)
switchAll

Correct answer: mergeAll

mergeAll subscribes to each inner Observable as it arrives and merges their emissions concurrently into a single stream.

Question 20: Which Angular decorator marks a class as an injectable service and specifies where it should be provided?

@Component
@Injectable (Correct answer)
@Inject
@NgModule

Correct answer: @Injectable

@Injectable accepts a `providedIn` property (e.g., 'root') that tree-shakes unused services and registers them in the specified injector.

Question 21: Which Angular PWA feature caches assets and API responses for offline use?

Service Worker via @angular/pwa (Correct answer)
Zone.js
HttpInterceptor
Angular Universal

Correct answer: Service Worker via @angular/pwa

@angular/pwa adds a pre-configured Service Worker that caches the app shell and API responses according to the ngsw-config.json policy.

Question 22: Which Angular decorator marks a class as available to the DI system as a provider?

@Injectable (Correct answer)
@Component
@NgModule
@Inject

Correct answer: @Injectable

@Injectable marks a class so Angular's DI system knows it can be injected and, if needed, also inject its own dependencies.

Question 23: What Angular pipe should you use to avoid repeated heavy computations in templates?

Pure custom pipe (Correct answer)
async
json
Impure custom pipe

Correct answer: Pure custom pipe

A pure pipe is only re-executed when its input reference changes, caching the result and skipping recomputation on every change detection cycle.

Question 24: 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 25: In Angular testing, what is the difference between `DebugElement.query()` and `DebugElement.queryAll()`?

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

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 26: What is the primary benefit of using `inject()` function instead of constructor-based injection in Angular services and components?

It automatically tree-shakes unused dependencies
It supports only singleton services
It bypasses the DI hierarchy for better performance
It allows injection outside of class constructors, such as in functions and field initializers (Correct answer)

Correct answer: It allows injection outside of class constructors, such as in functions and field initializers

The inject() function can be called in an injection context (constructor, field initializer, factory function) and enables functional patterns without needing class constructors.

Question 27: What is the difference between a service and a component in Angular?

Services render HTML; components do not
There is no difference
Components manage UI and views; services contain reusable business logic and data access (Correct answer)
Components are only used on the server side

Correct answer: Components manage UI and views; services contain reusable business logic and data access

Components are responsible for presenting the user interface and handling user interactions, while services encapsulate reusable logic, data access, and cross-cutting concerns shared across components.

Question 28: What does `TestBed.overrideComponent()` allow you to do in Angular tests?

Mock the component's constructor injection tokens
Override the change detection strategy for all tests
Replace a component's metadata (template, providers, styles) after TestBed has been configured (Correct answer)
Swap out an entire component for a stub component globally

Correct answer: Replace a component's metadata (template, providers, styles) after TestBed has been configured

TestBed.overrideComponent() modifies a component's template or providers at test time without redefining the entire TestBed configuration.

Question 29: In a FormControl, how would you implement objects?

By calling functions to create them
By specifying start and tags (Correct answer)
By importing them
Include them in a runtime package

Correct answer: By specifying start and tags

The correct answer: <br> By specifying start and tags

Question 30: What Angular CLI command runs unit tests and watches for file changes?

ng spec --watch
ng test (Correct answer)
ng run tests
ng karma

Correct answer: ng test

ng test launches Karma, runs all spec files, and re-runs tests automatically when source files change.

Question 31: What is the purpose of HttpClient in Angular?

To manage client-side routing
To make HTTP requests to APIs and external services (Correct answer)
To create HTML client-side templates
To handle WebSocket connections only

Correct answer: To make HTTP requests to APIs and external services

HttpClient is Angular's built-in service for making HTTP requests (GET, POST, PUT, DELETE) to backend APIs, returning Observables that can be subscribed to for response handling.

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

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

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

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

Question 33: Which observable on a FormControl emits only when the control's validation status changes?

stateChanges
validityChanges
valueChanges
statusChanges (Correct answer)

Correct answer: statusChanges

`statusChanges` emits the new status string ('VALID', 'INVALID', 'PENDING', 'DISABLED') whenever it changes.

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

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

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 35: How can you run async validators only after all synchronous validators pass?

Set runAsyncOnValid: true in the control options
Wrap async validators in a Validators.compose() call after sync ones
Angular does this automatically — async validators are skipped when sync validators fail (Correct answer)
Use a custom ValidatorFn that conditionally calls the async function

Correct answer: Angular does this automatically — async validators are skipped when sync validators fail

Angular's built-in behavior is to skip async validators entirely when any synchronous validator returns an error.

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

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

Correct answer: provideRouter() in bootstrapApplication()

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

Question 37: In Angular E2E testing with Cypress, what is the recommended way to interact with Angular-specific elements like mat-select?

Import Angular Material test harnesses into Cypress
Trigger native DOM events and use cy.get() with accessible selectors or data-cy attributes (Correct answer)
Use Angular's TestBed API inside Cypress commands
Use Protractor's Angular-aware waitForAngular helper

Correct answer: Trigger native DOM events and use cy.get() with accessible selectors or data-cy attributes

Cypress works at the browser DOM level, so triggering native events on accessible selectors or data-cy attributes is the reliable, Angular-agnostic approach.

Question 38: Which decorator marks a class as an NgRx state feature slice and automatically registers selectors?

createFeatureSelector()
@StoreModule()
@NgModule()
createFeature() (Correct answer)

Correct answer: createFeature()

createFeature() combines a feature name, reducer, and extra selectors into a single object and auto-generates a feature selector.

Question 39: Which RxJS operator delays each emission by a specified time but does not drop values?

auditTime
throttleTime
delay (Correct answer)
debounceTime

Correct answer: delay

delay shifts every emission forward in time by the specified duration without discarding any values.

Question 40: Which Semantic Versioning (SemVer) policy does Angular follow for its release cycle?

One release per year
Random versioning
Major version every 6 months, with LTS support for 18 months after release (Correct answer)
Patch releases only

Correct answer: Major version every 6 months, with LTS support for 18 months after release

Angular follows a predictable 6-month major release cadence with 18 months of LTS, giving enterprises a stable upgrade path.

Question 41: What are lazy loaded modules?

Feature modules loaded on demand when their route is first accessed, reducing initial bundle size (Correct answer)
Modules that load slowly due to performance issues
Modules that never load completely
Pre-loaded modules cached in browser memory

Correct answer: Feature modules loaded on demand when their route is first accessed, reducing initial bundle size

Lazy loading defers loading of feature modules until the user navigates to their routes, reducing the initial application bundle size and improving startup performance.

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

They are identical in behavior
setValue() is async; patchValue() is synchronous
setValue() requires all controls to be provided; patchValue() allows partial updates (Correct answer)
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 43: Which operator is best suited for sequential HTTP requests where the order of results must match the order of source emissions?

mergeMap
concatMap (Correct answer)
switchMap
exhaustMap

Correct answer: concatMap

concatMap subscribes to each inner Observable only after the previous one completes, preserving order at the cost of parallelism.

Question 44: What Angular feature helps enforce that private API surfaces are not accidentally exported in a library?

Angular's `ivy` compiler private flag
The `public_api.ts` barrel file combined with `ng-packagr` (Correct answer)
The `entryComponents` array in AppModule
The `exports` array in NgModule

Correct answer: The `public_api.ts` barrel file combined with `ng-packagr`

`ng-packagr` uses `public_api.ts` as the entry point, so only symbols explicitly exported there become part of the library's public API.

Question 45: Which operator should you use to emit a default value if the source Observable completes without emitting anything?

iif
defaultIfEmpty (Correct answer)
startWith
isEmpty

Correct answer: defaultIfEmpty

defaultIfEmpty emits a specified fallback value when the source completes without ever emitting, then completes itself.

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

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

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 47: What is the purpose of the `--code-coverage` flag in `ng test`?

It generates a coverage report showing which lines and branches are exercised by tests (Correct answer)
It enforces a minimum test pass rate before the build continues
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 48: Which zone.js-free approach can be used in Angular 16+ to notify the framework of a data change for change detection?

Calling `detectChanges()` on ApplicationRef
Dispatching a CustomEvent on the window
Writing to a Signal, which automatically schedules a check (Correct answer)
Using `markForCheck()` on ChangeDetectorRef

Correct answer: Writing to a Signal, which automatically schedules a check

Angular signals automatically schedule change detection when their value is updated, enabling zone-free, fine-grained reactivity.

Question 49: What does the on() helper inside createReducer() do?

Defines a selector
Creates a new action
Subscribes to the store
Registers a case handler for a specific action type (Correct answer)

Correct answer: Registers a case handler for a specific action type

on(ActionCreator, (state, action) => newState) registers a handler inside createReducer() for a specific action.

Question 50: How do you reactively display an error message only after the user has interacted with a field?

Check control.errors !== null only
Check control.invalid && control.touched in the template (Correct answer)
Subscribe to statusChanges and set a local error flag
Check control.invalid && control.dirty in the template

Correct answer: Check control.invalid && control.touched in the template

Combining `invalid` with `touched` ensures the error appears only after the user has visited the field, not on initial load.

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