Angular Web Framework Routing & Navigation 2 — Questions and Answers
Question 1: Which Angular Router guard interface should you implement to prevent a user from leaving a form with unsaved changes?
- CanActivate
- CanDeactivate (Correct answer)
- CanLoad
- Resolve
Correct answer: CanDeactivate
CanDeactivate is called before leaving a route and can prompt the user to confirm navigation away from unsaved data.
Question 2: What does the RouterModule.forChild() method do compared to RouterModule.forRoot()?
- It registers the router outlet in child components
- It creates a new Router instance for each feature module
- It registers routes without creating a new Router service instance (Correct answer)
- It lazy loads the child routes automatically
Correct answer: It registers routes without creating a new Router service instance
forChild() registers additional routes while reusing the single Router service instance created by forRoot().
Question 3: Which property of ActivatedRoute gives you a snapshot of the route params without subscribing to an Observable?
- route.params
- route.paramMap
- route.snapshot.paramMap (Correct answer)
- route.queryParams
Correct answer: route.snapshot.paramMap
ActivatedRoute.snapshot provides a static snapshot of the current route state, avoiding the need for an Observable subscription.
Question 4: What is the purpose of the <router-outlet name="sidebar"> syntax in Angular templates?
- It creates a secondary or auxiliary named outlet for rendering sibling routes (Correct answer)
- It sets the default outlet for all child routes
- It restricts which routes can render in that outlet
- It enables lazy loading for that outlet's routes
Correct answer: It creates a secondary or auxiliary named outlet for rendering sibling routes
Named outlets (auxiliary outlets) allow multiple independent router outlets to be active simultaneously, each rendering different routes.
Question 5: In Angular routing, what does setting pathMatch: 'full' on a route accomplish?
- It enables case-sensitive URL matching
- It requires the entire URL path to match the route's path, not just a prefix (Correct answer)
- It matches the route only when no child routes exist
- It prevents route parameter extraction
Correct answer: It requires the entire URL path to match the route's path, not just a prefix
pathMatch: 'full' ensures the route only matches when the full URL equals the path, commonly used on empty-string redirect routes.
Question 6: Which method of the Router service navigates programmatically and returns a Promise<boolean>?
- router.go()
- router.redirect()
- router.navigate() (Correct answer)
- router.push()
Correct answer: router.navigate()
Router.navigate() performs programmatic navigation and returns a Promise that resolves to true on success or false if navigation was cancelled.
Question 7: What happens when a CanActivate guard returns an UrlTree instead of false?
- Navigation proceeds normally to the requested route
- Navigation is cancelled and no redirect occurs
- Navigation is cancelled and the router redirects to the URL represented by the UrlTree (Correct answer)
- An error is thrown at runtime
Correct answer: Navigation is cancelled and the router redirects to the URL represented by the UrlTree
Returning a UrlTree from a guard cancels the current navigation and immediately starts a new navigation to the URL encoded in that UrlTree.
Angular Web Framework Routing & Navigation 2
Which Angular Router guard interface should you implement to prevent a user from leaving a form with unsaved changes?