Routing & Navigation Flashcards
7 cards from real Angular Web Framework practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Routing & Navigation flashcards as text
Which Angular feature introduced in v14+ allows defining routes without NgModules by using standalone components?
Answer: provideRouter() in bootstrapApplication()
In standalone Angular apps, provideRouter() is passed to bootstrapApplication() providers to configure routing without any NgModule.
How does Angular's RouterLinkActive directive determine which link is currently active?
Answer: It checks whether the link's route is part of the current active route tree
RouterLinkActive adds its CSS class when the associated route is part of the currently active route tree, supporting both exact and prefix matching.
What is the purpose of the router's state object passed via NavigationExtras when calling Router.navigate()?
Answer: It passes transient data to the target route without encoding it in the URL
NavigationExtras.state passes ephemeral data to the destination route accessible via HistoryState, without that data appearing in the URL.
In Angular routing, what does bindToComponentInputs: true in RouterModule.forRoot() configuration enable?
Answer: Automatic binding of route params, query params, and data to component @Input() properties
bindToComponentInputs automatically maps route parameters, query parameters, and data to matching @Input() properties on the routed component, removing the need for ActivatedRoute injection.
What is the recommended way to handle route-level error states when a Resolve guard's Observable throws an error?
Answer: Return EMPTY or use catchError to redirect to an error route
Catching the error inside the resolver with catchError and returning EMPTY (which cancels navigation) or a redirect UrlTree is the clean approach to resolver error handling.
Which Angular Router configuration option controls whether the router should use HTML5 pushState or hash-based URLs?
Answer: LocationStrategy provided via useClass in providers
Providing HashLocationStrategy using { provide: LocationStrategy, useClass: HashLocationStrategy } switches routing to hash-based URLs (#/path) instead of HTML5 pushState.
When using Angular's Router, what is the difference between router.navigate() and router.navigateByUrl()?
Answer: navigate() accepts a commands array with relative support; navigateByUrl() accepts a full URL string and is always absolute
router.navigate() takes a commands array and supports relative navigation, while router.navigateByUrl() takes a complete URL string and always navigates absolutely.