Angular Web Framework Angular Advanced Practice 4 — Questions and Answers
Question 1: What Angular feature allows you to write `@if`, `@for`, and `@switch` directly in templates without importing `NgIf`, `NgFor`, or `NgSwitch` directives?
- Standalone components
- Built-in control flow (Angular 17+) (Correct answer)
- Template expressions
- Structural directive shorthand
Correct answer: Built-in control flow (Angular 17+)
Angular 17 introduced built-in control flow syntax (@if, @for, @switch) that is compiled directly by the framework without needing CommonModule or directive imports.
Question 2: What is the primary benefit of using `inject()` function instead of constructor-based injection in Angular services and components?
- It bypasses the DI hierarchy for better performance
- It allows injection outside of class constructors, such as in functions and field initializers (Correct answer)
- It automatically tree-shakes unused dependencies
- It supports only singleton services
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 3: In Angular's HttpClient, which operator or mechanism should you use to retry a failed HTTP request up to 3 times with a delay between retries?
- retry(3) from RxJS (Correct answer)
- retryWhen with delayWhen
- catchError with recursion
- HttpRetryInterceptor built into Angular
Correct answer: retry(3) from RxJS
The RxJS retry(3) operator resubscribes to the source Observable (the HTTP call) up to 3 times on error, and retry({ count: 3, delay: 1000 }) adds a delay.
Question 4: Which Angular Signal API allows you to create a derived reactive value that recomputes automatically when its dependencies change?
- signal()
- effect()
- computed() (Correct answer)
- toSignal()
Correct answer: computed()
computed() creates a read-only Signal whose value is lazily recalculated whenever any of the Signals it reads inside its function change.
Question 5: What does the `resolveComponentFactory` approach get replaced by in modern Angular when dynamically creating components?
- ViewContainerRef.createComponent() with a component class directly (Correct answer)
- ComponentRef.attach()
- DynamicComponentLoader
- Renderer2.createElement()
Correct answer: ViewContainerRef.createComponent() with a component class directly
Since Angular 13, ViewContainerRef.createComponent(MyComponent) accepts the component class directly without needing ComponentFactoryResolver or resolveComponentFactory.
Question 6: What is the purpose of the `provideHttpClient(withInterceptorsFromDi())` call used in standalone Angular applications?
- Enables HTTP/2 multiplexing for all requests
- Registers HttpClient and supports class-based DI interceptors in the standalone bootstrap setup (Correct answer)
- Adds automatic CSRF token headers to requests
- Configures a mock testing backend
Correct answer: Registers HttpClient and supports class-based DI interceptors in the standalone bootstrap setup
provideHttpClient() configures HttpClient for standalone apps, and withInterceptorsFromDi() enables the older class-based HTTP_INTERCEPTORS token alongside functional interceptors.
Question 7: When using Angular's `Router` with `preloadingStrategy`, what does `PreloadAllModules` do?
- Loads all feature modules before the app bootstraps
- Loads all lazy modules in the background after the initial page load completes (Correct answer)
- Disables lazy loading and bundles everything eagerly
- Preloads only modules with a `data: { preload: true }` flag
Correct answer: Loads all lazy modules in the background after the initial page load completes
PreloadAllModules starts background loading of all lazy-loaded route modules after the initial navigation succeeds, so future navigations are nearly instant.
