VisaSpark
Sign in
intermediate18 min

The Angular Router

Defining routes, route parameters, and navigating between views.

What you'll learn

  • Define a basic route configuration mapping a path to a component
  • Read a route parameter (e.g. an id from the URL) inside a component
  • Navigate programmatically using the Router service

Explanation

Angular's Router maps URL paths to components, enabling single-page navigation without a full page reload. A basic route configuration is an array of route objects: const routes: Routes = [{ path: "products/:id", component: ProductDetailComponent }] -- :id is a route parameter, a placeholder matching any value in that URL segment.

Inside the matched component, you read the route parameter via the injected ActivatedRoute service: this.route.snapshot.paramMap.get("id") gives you the actual value from the current URL (e.g. "42" for a URL like /products/42).

You navigate programmatically (e.g. after a button click, rather than a template routerLink) by injecting the Router service and calling this.router.navigate(["/products", productId]). This is the router-based equivalent of the imperative window.location changes you might do in a plain page, but staying within Angular's single-page-app navigation (no full reload, and the router still tracks navigation state/history correctly).

Guided lab

Predict: Reading a route parameter

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models ActivatedRoute.snapshot.paramMap.get() with a plain Map, since a live router can't run here. Predict what's printed, including the type-conversion step.

const paramMap = new Map<string, string>([["id", "42"]]);

const rawId = paramMap.get("id");
console.log(typeof rawId, rawId);

const numericId = Number(rawId);
console.log(typeof numericId, numericId);

Stuck? Get a hint.

Common mistakes

  • Hardcoding a specific id value in a route path definition instead of using a route parameter (:id) that matches any value.
  • Forgetting paramMap.get() returns a string (or null), even for values that look numeric -- explicit conversion (e.g. Number(...)) is needed if a real number is required.
  • Using window.location.href to navigate instead of the Router service, which bypasses Angular's routing and causes a full, unnecessary page reload.

Knowledge check

Knowledge check

1. What does `:id` represent in a route path like `products/:id`?
2. What type does paramMap.get('id') return?
3. What does calling this.router.navigate([...]) avoid, compared to window.location.href?

Takeaway

Route parameters (:id) come through as strings via ActivatedRoute; navigate programmatically with the Router service, not window.location.

Summary

Routes map paths (with optional :parameters) to components; ActivatedRoute reads parameter values; the Router service navigates programmatically without a full reload.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Pipes: Built-in and Custom →