Angular Web Framework Angular Professional Development 3 — Questions and Answers
Question 1: When using Angular's `Router`, what option must be set to enable preloading of lazy-loaded modules automatically?
- RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })
- RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) (Correct answer)
- RouterModule.forChild(routes, { preload: true })
- RouterModule.forRoot(routes, { runGuardsAndResolvers: 'always' })
Correct answer: RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
Passing `PreloadAllModules` as the `preloadingStrategy` tells Angular's router to eagerly preload all lazy-loaded route chunks after initial load.
Question 2: Which RxJS operator is most appropriate when you need to cancel an in-flight HTTP request whenever a new search term is typed?
- mergeMap
- concatMap
- switchMap (Correct answer)
- exhaustMap
Correct answer: switchMap
`switchMap` unsubscribes from the previous inner observable and subscribes to the new one, effectively cancelling the prior HTTP request.
Question 3: In Angular, what is the default encapsulation strategy for component styles?
- ViewEncapsulation.None
- ViewEncapsulation.ShadowDom
- ViewEncapsulation.Emulated (Correct answer)
- ViewEncapsulation.Native
Correct answer: ViewEncapsulation.Emulated
`ViewEncapsulation.Emulated` (the default) adds unique attributes to elements so component styles don't leak, without using real Shadow DOM.
Question 4: What is the role of `ng-container` in Angular templates?
- Acts as a host element for dynamic components created with ComponentFactory
- Provides a grouping element that adds no extra DOM node (Correct answer)
- Defines the outlet where router views are rendered
- Wraps deferred content that loads on interaction
Correct answer: Provides a grouping element that adds no extra DOM node
`<ng-container>` is a logical grouping element that Angular removes from the DOM, useful for applying structural directives without adding extra HTML elements.
Question 5: Which Angular concept allows injecting dependencies at a component level rather than globally, creating a new instance per component tree?
- Multi-provider tokens
- Component-level providers via the `providers` array in @Component (Correct answer)
- InjectionToken with `factory` property
- Tree-shakable services with `providedIn: 'root'`
Correct answer: Component-level providers via the `providers` array in @Component
Listing a service in a `@Component`'s `providers` array creates a scoped injector, giving that component and its children their own service instance.
Question 6: When writing an Angular custom structural directive, which class must be injected to manipulate the host view container?
- ElementRef
- TemplateRef and ViewContainerRef (Correct answer)
- Renderer2
- ChangeDetectorRef
Correct answer: TemplateRef and ViewContainerRef
A structural directive uses `TemplateRef` to reference the embedded template and `ViewContainerRef` to create, insert, or destroy views.
Question 7: What does the `async` pipe do when the component it's used in is destroyed?
- Throws an error if the observable is still active
- Automatically unsubscribes to prevent memory leaks (Correct answer)
- Completes the source observable
- Emits a final null value before destroying
Correct answer: Automatically unsubscribes to prevent memory leaks
The `async` pipe calls `unsubscribe()` on the observable during the component's `ngOnDestroy` lifecycle hook, preventing memory leaks automatically.
Angular Web Framework Angular Professional Development 3
When using Angular's `Router`, what option must be set to enable preloading of lazy-loaded modules automatically?