Training Trains Internship
Student login
← Angular learning path
Angular · Module 6 of 10

Routing

Navigate between pages with the Angular Router.

📖 Key ideas

  1. Define routes: { path: "about", component: AboutComponent }.
  2. <router-outlet> shows the active page.
  3. routerLink="/about" navigates without reload.
  4. Route params: path "users/:id", read via ActivatedRoute or input binding.
  5. Guards (canActivate) protect pages; lazy loading with loadComponent.
💡 Real-life example: The router is a TV remote: each channel number (URL) shows a different programme (component) on the same screen (outlet).
RoutesArray mapping paths to components
router-outletWhere the routed component appears
routerLinkNavigation directive
GuardDecides if a route can open