Advanced Angular test (Advanced)

Sample questions

5 sample questions from the Advanced Angular test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. Which RxJS operator is commonly used in NgRx effects to handle side effects such as HTTP requests and ensures that only the latest request is processed, cancelling any previous ongoing requests?

   1. mergeMap
   2. exhaustMap
   3. switchMap
   4. concatMap

   Answer: C. switchMap

   In NgRx effects, the operator `switchMap` is used to handle side effects such as HTTP requests. It cancels any previous ongoing requests when a new action is dispatched, ensuring that only the latest request is processed. This is particularly useful for scenarios like typeahead search, where the user may trigger multiple requests in quick succession, and we want to avoid processing outdated requests.

2. In an Angular application using lazy loading with RouterModule, which of the following statements accurately describes the behavior of a feature module when a route is accessed for the first time?

   1. The feature module is preloaded along with the main application bundle.
   2. Lazy loading is not supported in Angular versions prior to 12.
   3. The feature module is loaded only when the route is accessed for the first time.
   4. Lazy loading does not impact application performance.

   Answer: C. The feature module is loaded only when the route is accessed for the first time.

   Lazy loading ensures that a feature module is only loaded when the route is accessed for the first time, improving application performance by reducing initial load time. Other options incorrectly describe behaviors related to eager loading or incorrect assumptions about lazy loading.

3. Which of the following correctly describes the difference between DetectChanges and markForCheck in Angular?

   1. DetectChanges is used to mark a component for change detection, while markForCheck is a method used by Angular to detect changes in the component tree.
   2. markForCheck is used to trigger change detection manually for specific components, while DetectChanges is a method used by Angular to detect changes in the component tree.
   3. markForCheck is used to trigger change detection manually for the entire application, while DetectChanges is a method used by Angular to detect changes in the component tree.
   4. DetectChanges is used to mark a component for change detection, while markForCheck is used to mark a component for change detection manually.

   Answer: B. markForCheck is used to trigger change detection manually for specific components, while DetectChanges is a method used by Angular to detect changes in the component tree.

   markForCheck is used to mark a component for change detection, allowing Angular to check for changes in that component and its children. DetectChanges is a method that explicitly triggers change detection for the entire application. markForCheck is more efficient when only specific components need to be checked, whereas DetectChanges is a broader method that checks the entire component tree.

4. Which of the following statements correctly describes how lazy loading with RouterModule works in Angular?

   1. Lazy loading with RouterModule splits the application into chunks that are loaded on demand when a route is accessed for the first time.
   2. Lazy loading with RouterModule is used to pre-fetch all routes before the user navigates to them.
   3. Lazy loading with RouterModule loads all modules at application startup to improve initial load time.
   4. Lazy loading with RouterModule is not supported in Angular versions 12 and above.

   Answer: A. Lazy loading with RouterModule splits the application into chunks that are loaded on demand when a route is accessed for the first time.

   Lazy loading with RouterModule is the correct answer because it allows Angular to split the application into chunks that are loaded only when needed, improving performance. The other options either describe incorrect behaviors or are not directly related to code splitting with lazy loading.

5. Which of the following statements correctly describes the behavior of the @for structural directive in Angular with regard to performance optimization?

   1. The @for directive requires a track expression to avoid reusing DOM elements when the list changes.
   2. The @if directive requires a track expression to optimize performance by reusing DOM elements when the list changes.
   3. The @switch directive requires a track expression to optimize performance by reusing DOM elements when the list changes.
   4. The @for directive requires a track expression to optimize performance by reusing DOM elements when the list changes.

   Answer: D. The @for directive requires a track expression to optimize performance by reusing DOM elements when the list changes.

   The @for directive in Angular (v17+) requires a track expression to enable efficient DOM element reuse when the list changes. This optimization minimizes unnecessary DOM manipulations, which is crucial for performance in large lists. Other options are incorrect because: (1) the @if directive does not require a track expression, (2) the @switch directive does not require a track expression, and (3) the @for directive does not require a track expression to avoid reusing DOM elements, but to enable it.