Angular Web Framework Angular Advanced Practice 2 — Questions and Answers
Question 1: Which Angular CDK feature allows you to create custom overlays that are rendered in a portal outside the normal DOM tree?
- Overlay
- Portal (Correct answer)
- DragDrop
- ScrollDispatcher
Correct answer: Portal
The CDK Portal module lets you render components or templates into a PortalOutlet that lives outside the component's normal DOM position.
Question 2: What is the purpose of the `APP_INITIALIZER` token in Angular?
- To lazy-load feature modules on startup
- To run initialization logic before the app bootstraps (Correct answer)
- To register global HTTP interceptors
- To configure the Angular compiler options
Correct answer: To run initialization logic before the app bootstraps
APP_INITIALIZER accepts factory functions that return Promises or Observables; Angular waits for them to complete before rendering the root component.
Question 3: In Angular's Ivy renderer, what replaces the old NgFactory files used by View Engine?
- Locality principle compilation with ɵcmp and ɵfac static fields (Correct answer)
- JIT-only runtime compilation modules
- Separate .ngfactory.ts files per component
- Global module factory registry
Correct answer: Locality principle compilation with ɵcmp and ɵfac static fields
Ivy uses locality: each class carries its own compiled metadata (ɵcmp, ɵfac, ɵmod) as static fields, eliminating the need for separate NgFactory files.
Question 4: Which RxJS operator is best suited for switching to a new Observable while cancelling the previous in-flight request, such as in a search typeahead?
- mergeMap
- concatMap
- switchMap (Correct answer)
- exhaustMap
Correct answer: switchMap
switchMap unsubscribes from the previous inner Observable and subscribes to the new one, which cancels any ongoing HTTP request for prior keystrokes.
Question 5: What does the `trackBy` function in `*ngFor` receive as its two arguments?
- index and item (Correct answer)
- item and collection
- key and value
- index and templateRef
Correct answer: index and item
The trackBy callback receives the loop index and the current item, and should return a unique identifier so Angular avoids re-rendering unchanged DOM nodes.
Question 6: Which Angular decorator marks a class as an injectable service and specifies where it should be provided?
- @NgModule
- @Component
- @Injectable (Correct answer)
- @Inject
Correct answer: @Injectable
@Injectable accepts a `providedIn` property (e.g., 'root') that tree-shakes unused services and registers them in the specified injector.
Question 7: What is the effect of setting `changeDetection: ChangeDetectionStrategy.OnPush` on a component?
- Disables all change detection for that component permanently
- Only runs change detection when inputs change, an event fires inside the component, or async pipe emits (Correct answer)
- Forces change detection to run synchronously on every frame
- Enables zone-free change detection by default
Correct answer: Only runs change detection when inputs change, an event fires inside the component, or async pipe emits
OnPush skips the component's subtree during global checks unless its inputs have a new reference, an internal event occurs, markForCheck() is called, or an async pipe emits.
