The ActivatedRouteSnapshot and ActivatedstateSnapshot in Angular are used to comprehend how a component functions and is used.
The ActivatedStateSnapshot is a dynamic snapshot of the current state of the route, whereas the ActivatedRouteSnapshot is a static image of the route information.
In this blog, we will take a look at the ActivatedRouteSnapshot and ActivatedstateSnapshot classes in Angular. We’ll look in their functions and methods of utilisation.
We may gain a better knowledge of Angular routing by comprehending these two classes.
There are two types of snapshots that can be used while using the Angular Router: the ActivatedRouteSnapshot and the ActivatedStateSnapshot.
What is ActivatedStateSnapshot?
Activatedstate A class called Snapshot holds data on the status of an enabled component. It contains details like the component type, parameters, snapshots, and more metadata.
When a component is being navigated to, the Router uses this class to offer details about the component’s current state.
How does Angular’s ActivatedstateSnapshot function now? With Angular’s new ActivatedstateSnapshot functionality, you can save the state of your app before it is destroyed. If you need to save data or carry out specific tasks before the app is deleted, this can be helpful.
@Component({templateUrl:'app-template.html'})
class MyComponent {
constructor(router: Router) {
let stateObj: RouterState = router.routerState;
let snapshot: RouterStateSnapshot = stateObj.snapshot;
console.log(snapshot);
}
}
The state of your app is saved in a local storage object as part of ActivatedStateSnapshot’s operation. The state is restored after being obtained from the local storage object when the app is destroyed. This makes sure that all actions and data are kept intact and that your programme may keep running as usual.
ActivatedStateSnapshot has some restrictions, but overall it is a useful tool for maintaining the state of your Angular apps.
What is ActivatedRouteSnapshot?
When a user navigates to a page on your Angular website, theAngular router uses the browser URL to find the corresponding route information.
Once it has retrieved this information, it proceeds to create a ActivatedRouteSnapshot instance.
The instance of ActivatedRouteSnapshot includes details about the route, its parameters, and the data related to that specific route. When deciding which components should be rendered for a given route, the router consults this instance.
Here’s how you can access the ActivatedRouteSnapshot from router class.
@Component({templateUrl:'app-template.html'})
class MyComponent {
constructor(private router: Router) {
let stateObj: RouterState = router.routerState;
let snapshotObj: RouterStateSnapshot = stateObj.snapshot;
let activatedRouteRoot: ActivatedRouteSnapshot = snapshotObj.root;
console.log(activatedRouteRoot);
}
}
ActivatedRoute vs ActivatedRouteSnapshot
- ActivatedRouteSnapshot is an immutable object that represents a particular version of ActivatedRoute and is used to determine whether ActivatedRoute can be reused. While ActivatedRoute exposes all the same characteristics as observables, it exposes them as plain values.
- ActivatedRouteSnapshot is no mutable data structure.
- If you use ActivatedRouteSnapshot with a parameter from the current moment in your route situation, such as product:id, you won’t have access to newer IDs if the user changes them or if your website changes. Snapshot suggests that it was at the point in time when OnInit was carried out, which was right now. Any changes will therefore be ignored.
- The URL won’t change while the user is on this component if you use the Snapshot function to initialise values into a parameter only once during component initialization.
- You’re likely supposed to arrange the subscription, so you’ll have to cancel it. You should additionally turn OnDestroy to stop the activated route. There’s a lot of overhead for a static route.
How to get queryParams using ActivatedRouteSnapshot
The queryParams of an Angular route are accessible through the ActivatedRouteSnapshot service. To utilise it, call the get function and provide in the name of the queryParam you wish to get before injecting the ActivatedRouteSnapshot service into your class constructor.
Calling the paramMap method will produce an observable that emits a map of all the queryParams if you want to get all of them at once. You may then use the data by subscribing to this observable and using it as necessary.
import { Router, RouterStateSnapshot } from '@angular/router';
export class LoginComponent {
constructor(private router: Router) {
const snapshotObj: RouterStateSnapshot = router.routerState.snapshot;
console.log(snapshotObj);
}
}Conclusion
Both snapshots are useful for different purposes. While ActivatedStateSnapshot is used to retrieve data about the previous route, ActivatedRouteSnapshot is primarily used for debugging. To learn more about ActivatedRouteSnapshot and ActivatedstateSnapshot , refer here.
For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.
