How to Navigate Programmatically in Angular: Simple Guide

In Angular, you navigate programmatically by injecting the Router service and calling its navigate() or navigateByUrl() methods with the target route. This lets you change views without user clicks, useful for redirects or conditional navigation.

Syntax

To navigate programmatically, inject Angular's Router service in your component. Use router.navigate() with an array of path segments or router.navigateByUrl() with a string URL.

• router.navigate(commands: any[], extras?): Navigate using an array of route parts.
• router.navigateByUrl(url: string, extras?): Navigate using a full URL string.

typescript

constructor(private router: Router) {}

// Navigate using array
this.router.navigate(['/path', id]);

// Navigate using URL string
this.router.navigateByUrl('/path/' + id);

Example

This example shows a button that, when clicked, navigates to a user detail page with a dynamic user ID.

typescript

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

@Component({
  selector: 'app-user-list',
  template: `<button (click)="goToUser(42)">Go to User 42</button>`
})
export class UserListComponent {
  constructor(private router: Router) {}

  goToUser(userId: number) {
    this.router.navigate(['/user', userId]);
  }
}

Output

When the button is clicked, the app navigates to the URL '/user/42' and displays the user detail page.

Common Pitfalls

Common mistakes include:

• Not injecting Router in the constructor.
• Passing a string instead of an array to navigate().
• Forgetting to import RouterModule in your module.
• Using relative paths without specifying the relativeTo option.

Always ensure the route exists in your routing configuration.

typescript

/* Wrong: passing string to navigate() */
this.router.navigate('/user/42'); // Error

/* Right: pass array */
this.router.navigate(['/user', 42]);

Quick Reference

Method	Usage	Description
router.navigate(commands: any[])	this.router.navigate(['/path', id])	Navigate using route segments array
router.navigateByUrl(url: string)	this.router.navigateByUrl('/path/' + id)	Navigate using full URL string
relativeTo option	this.router.navigate(['details'], { relativeTo: this.route })	Navigate relative to current route
extras options	this.router.navigate(['/path'], { queryParams: { q: 'test' } })	Add query params or replace URL

Key Takeaways

Inject Angular's Router service to navigate programmatically.

Use router.navigate() with an array of path segments for flexible routing.

Use router.navigateByUrl() when you have a full URL string.

Always check your routes are configured and imported correctly.

Avoid common mistakes like passing strings to navigate() or missing Router injection.