MEAN Angular Routing and Forms 4 — Questions and Answers
Question 1: Which Angular guard interface should you implement to prevent navigation away from a component with unsaved changes?
- CanActivate
- CanDeactivate (Correct answer)
- CanLoad
- Resolve
Correct answer: CanDeactivate
CanDeactivate guards are used to intercept navigation away from a route, allowing you to prompt the user about unsaved changes.
Question 2: In Angular reactive forms, what does the `patchValue()` method do differently than `setValue()`?
- patchValue() triggers validation while setValue() does not
- patchValue() updates only specified controls while setValue() requires all controls to be provided (Correct answer)
- patchValue() works only on FormArray while setValue() works on FormGroup
- patchValue() resets the form while setValue() updates it
Correct answer: patchValue() updates only specified controls while setValue() requires all controls to be provided
patchValue() allows partial updates by only setting the controls you specify, while setValue() throws an error if you omit any controls.
Question 3: What is the purpose of the `RouterLinkActive` directive in Angular?
- It programmatically navigates to a route
- It adds a CSS class to an element when its linked route is active (Correct answer)
- It prevents navigation to inactive routes
- It lazy-loads a module when a link is clicked
Correct answer: It adds a CSS class to an element when its linked route is active
RouterLinkActive automatically adds a specified CSS class to the host element when the associated RouterLink's route is currently active.
Question 4: Which operator is recommended to use with route parameter observables to avoid memory leaks in Angular components?
- mergeMap
- switchMap
- takeUntil with a destroy Subject (Correct answer)
- exhaustMap
Correct answer: takeUntil with a destroy Subject
Using takeUntil with a Subject that emits on ngOnDestroy ensures the subscription is automatically cleaned up when the component is destroyed.
Question 5: In Angular, what does setting `runGuardsAndResolvers: 'always'` on a route configuration do?
- Forces guards to run only on the first navigation
- Runs guards and resolvers every time the route is activated, even with the same URL (Correct answer)
- Disables caching for route resolvers
- Makes all guards run in parallel instead of sequentially
Correct answer: Runs guards and resolvers every time the route is activated, even with the same URL
Setting runGuardsAndResolvers to 'always' ensures guards and resolvers execute on every navigation to the route, including when query params or fragments change.
Question 6: What Angular reactive form method would you use to programmatically add a control to a FormGroup after it has been initialized?
- formGroup.append()
- formGroup.addControl() (Correct answer)
- formGroup.push()
- formGroup.insert()
Correct answer: formGroup.addControl()
The addControl() method on FormGroup allows you to dynamically add a new AbstractControl with a given name after the group has been created.
Question 7: When using Angular's `Router.navigate()`, what is the purpose of the `relativeTo` option?
- It sets the base URL for all future navigations
- It navigates relative to the specified ActivatedRoute instead of the root (Correct answer)
- It resolves route parameters relative to the parent component
- It enables lazy loading relative to the current module
Correct answer: It navigates relative to the specified ActivatedRoute instead of the root
The relativeTo option tells the router to interpret the provided path relative to the given ActivatedRoute, enabling sibling or child route navigation.
MEAN Angular Routing and Forms 4
Which Angular guard interface should you implement to prevent navigation away from a component with unsaved changes?