Router
How to get query parameters from an Angular URL route
- import ActivatedRoute from ‘@angular/router’.
- Inject ActivatedRoute class in constructor.
- Access the queryParams property of the ActivatedRoute class. This property returns an observable of the query parameters that are available in the current URL route.
We'll look at an example to help
Check out the following link.
http://localhost:4200/posts?website=codeehut.com
Now, you can get to the URL parameters in the component by subscribing to ActivatedRoute. queryParams observable
In case you want to add a global loader in your Angular application for a smooth transition between route change.
This loader has to be defined in your top level component in order to be global.
As a result open app.component.html and move the <router-outlet></router-outlet> inside a container element (ex. <main>). This element will be responsible for handling the loading effect, based on the this.loading:boolean value.
The loading boolean value will be handled by the this.router.events subscription which listens all router events.
The events that are important for the loader is the NavigationStart and NavigationEnd. We must also add the NavigationCancel and NavigationError in case that something will not work as it should.
Create a UrlTree from a url using Angular router
Angular Router is the class that handles almost anything about navigation and urls in your application. One very useful method the parseUrl(url) which accepts a url as parameter and returns a UrlTree.
this.route.snapshot.paramMap.get(name: string);
Get data and parameters from Activated route snapshot in angular