Angular Routing

Anjali Gurjar - Feb 2 - - Dev Community

Angular Routing Overview
Angular uses the RouterModule to configure and manage routes. This enables Single Page Applications (SPA) to navigate between views without a full page reload.

What is ActivatedRoute?
ActivatedRoute is a service that provides access to information about the currently activated route, such as:
✅ Route parameters (params)
✅ Query parameters (queryParams)
✅ Route data (data)
✅ Route snapshots

Accessing Route Parameters
Route parameters allow passing dynamic values in the URL.

Example: Route with Parameter
URL: http://localhost:4200/product/101

Fetching Route Parameters using ActivatedRoute

Accessing Query Parameters
Query parameters are used to pass optional data in the URL.

Example URL with Query Parameters
http://localhost:4200/product/101?color=red&size=medium

Fetching Query Parameters

Accessing Route Data
You can pass static data to a route using the data property in route configuration.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .