Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohitjaiswal28/routing-angular
Angular routing is a powerful feature that allows you to navigate between different components or modules within your Angular application.
https://github.com/mohitjaiswal28/routing-angular
angular path-parameters queryparameters queryparams routing
Last synced: 16 days ago
JSON representation
Angular routing is a powerful feature that allows you to navigate between different components or modules within your Angular application.
- Host: GitHub
- URL: https://github.com/mohitjaiswal28/routing-angular
- Owner: mohitjaiswal28
- Created: 2024-08-17T11:53:57.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-27T11:57:34.000Z (about 2 months ago)
- Last Synced: 2024-10-28T14:02:55.396Z (about 2 months ago)
- Topics: angular, path-parameters, queryparameters, queryparams, routing
- Language: TypeScript
- Homepage: https://mohitjaiswal28.medium.com/routing-in-angular-0bc54af59caf
- Size: 1.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Routing 🌐
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.
## Path vs Query Parameters
- [For more detail, read this Medium article by @AveryCS
](https://medium.com/@averydcs/understanding-path-variables-and-query-parameters-in-http-requests-232248b71a8)
# 1. Path Parameters 📍
### 1.1 Passing path parameter in routes:
```
```
```
const routes: Routes = [
{path: 'books/:boodID/author/:authorID', component: BookComponent}
]
```
### 1.2 Retrieving path parameter from routes:
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']
})
```
# 2. Query Parameters 🔍
### 2.1 Passing query parameter in routes:
```
```
```
const routes: Routes = [
{path: 'product', component: ProductComponent}
]
```
### 2.2 Retrieving query parameter from routes:
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']
})
```
# 3. Lazy Loading 🔁
Angular only loads modules as needed, rather than loading all modules when the application launches.
# How to Clone and Run this Project 🖥️
1. Clone the repository:
```
git clone https://github.com/mohitjaiswal28/Routing-Angular.git
```
2. Navigate to the project directory:
```
cd Routing-Angular
```
3. Install the dependencies:
```
npm install
```
4. Run the application:
```
ng serve
```