How to navigate programmatically in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Programmatic navigation enables dynamic route changes in Angular applications based on user actions, form submissions, or business logic conditions.
As the creator of CoreUI with extensive Angular experience since 2014, I’ve implemented programmatic navigation in countless dashboard scenarios including form submissions and conditional redirects.
The most reliable approach is injecting the Router service and using its navigate() method with route arrays.
This method provides full control over navigation timing and parameters while maintaining Angular’s routing architecture.
Inject the Router service and use the navigate() method with route arrays for programmatic navigation.
import { Component } from '@angular/core'
import { Router } from '@angular/router'
@Component({
selector: 'app-user-form',
template: '<button (click)="saveAndRedirect()">Save User</button>'
})
export class UserFormComponent {
constructor(private router: Router) {}
saveAndRedirect() {
// Save user logic here
this.router.navigate(['/users', 123])
}
}
This code injects the Router service into a component and uses navigate() to redirect to a specific user page after saving. The method accepts an array where the first element is the base route and subsequent elements are route parameters. This approach maintains type safety and integrates seamlessly with Angular’s routing system, supporting complex navigation scenarios with parameters and query strings.
Best Practice Note:
This is the navigation pattern we use throughout CoreUI Angular components for consistent routing behavior.
Use navigateByUrl() for absolute URL strings or navigate() with arrays for parameter-based routes to maintain routing flexibility.
