Angular routing is a powerful feature that allows you to navigate between different components or modules within your Angular application. It provides a seamless user experience by dynamically updating the content without reloading the entire page.
<a [routerLink] = ['book', bookID, 'author', authorID]>
const routes: Routes = [
{path: 'books/:boodID/author/:authorID', component: BookComponent}
]
There are two ways for retrieving the path param from the routes:
-
snapshot
(for static route till the component is active and no change in route) -
observable
(for dynamic route) -
Using snapshot 📸
this.bookIDfromRoutes = this.routes.snapshot.paramMap.get('bookID')
this.bookIDfromRoutes = this.routes.snapshot.params['bookID']
- Using observable 📡
this.routes.paramMap.subscribe(params => {
this.bookIDfromRoutes = params.get('bookID')
})
this.routes.params.subscribe(params => {
this.bookIDfromRoutes = params['bookID']
})
<a [routerLink] = "['product']" [queryParams]={search: searchValue}>
const routes: Routes = [
{path: 'product', component: ProductComponent}
]
There are two ways for retrieving the path param from the routes:
-
snapshot
(for static route till the component is active and no change in route) -
observable
(for dynamic route) -
Using snapshot 📸
this.product = this.routes.snapshot.queryParamMap.get('search')
this.product = this.routes.snapshot.queryParams['search']
- Using observable 📡
this.routes.queryParamMap.subscribe(params => {
this.product = params.get('search')
})
this.routes.queryParams.subscribe(params => {
this.product = params['search']
})
Angular only loads modules as needed, rather than loading all modules when the application launches.
- Clone the repository:
git clone https://github.com/mohitjaiswal28/Routing-Angular.git
- Navigate to the project directory:
cd Routing-Angular
- Install the dependencies:
npm install
- Run the application:
ng serve