Angular — Navigation

RouterLink

<a routerLink="/home">Home</a>
<a [routerLink]="['/user', userId]">Profile</a>

RouterLinkActive

<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>

Programmatic Navigation

import { Router } from '@angular/router';

@Component({ ... })
export class MyComponent {
  constructor(private router: Router) {}
  
  navigate() {
    this.router.navigate(['/user', 123]);
  }
  
  navigateWithQuery() {
    this.router.navigate(['/search'], { 
      queryParams: { q: 'angular' } 
    });
  }
}

Route Events

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      console.log('Navigated to:', event.url);
    }
  });
}

Relative Navigation

// Navigate relative to current route
this.router.navigate(['../sibling'], { relativeTo: this.route });

Mini Practice

1. Use routerLink
2. Highlight active routes
3. Navigate programmatically
4. Listen to route events

Up Next

Continue with API Calls — making HTTP requests.