← Back to Articles         
How do you navigate programmatically using Router?

How do you navigate programmatically using Router?

Published on 30 Sep 2026     5 min read Angular
Routing

What is Programmatic Navigation?

Programmatic navigation means navigating from one Angular route to another using TypeScript code instead of the user clicking a routerLink.

For normal HTML navigation:

<a routerLink="/products">Products</a>

For programmatic navigation:

this.router.navigate(['/products']);

It is useful when navigation should happen after some logic completes, such as:

  • After successful login
  • After saving a form
  • After creating/updating a record
  • After logout
  • Based on a condition
  • After an API response

Full Simple Sample Program

Suppose we want to navigate from the Home page to the Products page when a button is clicked.

home.ts

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <h2>Home Page</h2>

    <button (click)="goToProducts()">
      Go to Products
    </button>
  `
})
export class Home {

  constructor(private router: Router) {
  }

  goToProducts(): void {
    this.router.navigate(['/products']);
  }
}

products.ts

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

@Component({
  selector: 'app-products',
  standalone: true,
  template: `
    <h2>Products Page</h2>
    <p>Welcome to Products.</p>
  `
})
export class Products {
}

app.routes.ts

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

import { Home } from './home';
import { Products } from './products';

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'products', component: Products }
];

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet
  ],
  template: `
    <h1>My Angular Application</h1>

    <router-outlet></router-outlet>
  `
})
export class App {
}

Explanation

Step 1: Import Router

First, import Router from Angular Router:

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

Router is an Angular service that allows us to control navigation through TypeScript.

Step 2: Inject Router

Inject the Router service:

constructor(private router: Router) {
}

Angular's Dependency Injection system provides the Router object.

Now we can access it using:

this.router

Step 3: Call navigate()

this.router.navigate(['/products']);

This tells Angular:

Navigate to
     ↓
/products
     ↓
Angular Router checks routes
     ↓
{ path: 'products', component: Products }
     ↓
Products component displayed

navigate() with Route Parameters

Suppose you have this route:

{
  path: 'products/:id',
  component: ProductDetails
}

You can navigate to product 10:

this.router.navigate(['/products', 10]);

Angular creates:

/products/10

For product 25:

this.router.navigate(['/products', 25]);

Result:

/products/25

This is cleaner than manually constructing the URL string.

Navigate with Query Parameters

Suppose you want:

/products?category=laptop&page=2

You can write:

this.router.navigate(['/products'], {
  queryParams: {
    category: 'laptop',
    page: 2
  }
});

Angular generates:

/products?category=laptop&page=2

Real-World Example: Navigate After Login

One of the most common uses is redirecting the user after successful login.

login(): void {

  const loginSuccessful = true;

  if (loginSuccessful) {
    this.router.navigate(['/dashboard']);
  }
}

Flow:

User clicks Login
       ↓
Login validation/API call
       ↓
Login successful
       ↓
router.navigate(['/dashboard'])
       ↓
Angular navigates to Dashboard

In a real application, the navigation often happens after an API response:

login(): void {

  this.authService.login().subscribe({
    next: () => {
      this.router.navigate(['/dashboard']);
    },
    error: () => {
      console.log('Login failed');
    }
  });
}

navigate() vs navigateByUrl()

Angular provides two commonly used methods.

navigate()

this.router.navigate(['/products', 10]);

It accepts URL segments as an array.

Result:

/products/10

This is usually convenient when working with dynamic values.

navigateByUrl()

You can also write:

this.router.navigateByUrl('/products/10');

Here, you provide the URL as a string.

Comparison

navigate() navigateByUrl()
Uses URL segments Uses a URL string / UrlTree
navigate(['/products', 10]) navigateByUrl('/products/10')
Convenient for dynamic segments and navigation extras Convenient when you already have the complete URL

Example:

this.router.navigate(['/products', productId]);

versus:

this.router.navigateByUrl('/products/' + productId);

Modern Angular: Using inject()

Instead of constructor injection:

constructor(private router: Router) {
}

modern Angular also allows the inject() function:

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <button (click)="goToProducts()">
      Products
    </button>
  `
})
export class Home {

  private router = inject(Router);

  goToProducts(): void {
    this.router.navigate(['/products']);
  }
}

Both approaches are valid:

constructor(private router: Router) {}

or:

private router = inject(Router);

routerLink vs Router.navigate()

This is an important interview distinction.

routerLink

Used mainly in the HTML template:

<a routerLink="/products">Products</a>

Best when navigation is directly initiated through a link/button in the template without additional TypeScript logic.

Router.navigate()

Used from TypeScript:

this.router.navigate(['/products']);

Best when navigation depends on application logic.

For example:

if (loginSuccessful) {
  this.router.navigate(['/dashboard']);
}

So:

routerLink
    ↓
Template-based navigation


Router.navigate()
    ↓
TypeScript/programmatic navigation

Key Points

  • Router is an Angular service from:
@angular/router
  • Inject it using constructor injection:
constructor(private router: Router) {}

or modern inject():

private router = inject(Router);
  • Basic programmatic navigation:
this.router.navigate(['/products']);
  • Navigation with route parameter:
this.router.navigate(['/products', 10]);

Result:

/products/10
  • Navigation with query parameters:
this.router.navigate(['/products'], {
  queryParams: {
    category: 'laptop'
  }
});
  • navigate() uses route commands/segments.
  • navigateByUrl() accepts a complete URL string or UrlTree.
  • Programmatic navigation is commonly used after login, logout, form submission, CRUD operations, and API responses.

Interview Questions and Answers

1. How do you navigate programmatically in Angular?

Inject the Router service and call navigate():

constructor(private router: Router) {}

goToProducts(): void {
  this.router.navigate(['/products']);
}

2. How do you navigate with a route parameter?

this.router.navigate(['/products', 10]);

This navigates to:

/products/10

3. How do you navigate with query parameters?

this.router.navigate(['/products'], {
  queryParams: {
    category: 'laptop'
  }
});

Result:

/products?category=laptop

4. What is the difference between routerLink and Router.navigate()?

routerLink is primarily used for declarative navigation in HTML templates, whereas Router.navigate() is used for programmatic navigation from TypeScript.

5. What is the difference between navigate() and navigateByUrl()?

navigate() accepts an array of route commands:

this.router.navigate(['/products', 10]);

navigateByUrl() accepts a complete URL string or UrlTree:

this.router.navigateByUrl('/products/10');

6. When would you use programmatic navigation?

Common scenarios include:

Login successful       → /dashboard
Logout                  → /login
Product created         → /products
Order completed         → /order-success
Unauthorized operation  → /access-denied

Interview-ready answer

Programmatic navigation in Angular is performed using the Router service. We inject Router into a component or service and call methods such as router.navigate() or router.navigateByUrl(). It is commonly used when navigation depends on application logic, such as after login, form submission, or an API operation.

Keep Learning - More From This Category

← Back to Articles