How to use routerLink in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
RouterLink is Angular’s directive for creating navigation links that enable client-side routing without full page reloads in single-page applications. As the creator of CoreUI with over 25 years of development experience, I use routerLink extensively for building seamless navigation experiences in Angular applications. The most effective approach is using the routerLink directive with proper path configuration and active state management. This provides fast, smooth navigation while maintaining browser history and SEO-friendly URLs.
Use the routerLink directive on anchor tags to create client-side navigation links with proper path binding and active states.
// app.component.html
<nav class="navbar">
<ul>
<li>
<a routerLink="/home" routerLinkActive="active">Home</a>
</li>
<li>
<a routerLink="/about" routerLinkActive="active">About</a>
</li>
<li>
<a [routerLink]="['/users', userId]" routerLinkActive="active">
User Profile
</a>
</li>
<li>
<a routerLink="/products"
[queryParams]="{category: 'electronics'}"
routerLinkActive="active">
Electronics
</a>
</li>
</ul>
</nav>
// Component with navigation
export class NavigationComponent {
userId = 123
navigateToUser(id: number) {
// Programmatic navigation alternative
this.router.navigate(['/users', id])
}
}
// Relative navigation in child component
<a routerLink="../sibling" routerLinkActive="active">Sibling Route</a>
<a routerLink="./child" routerLinkActive="active">Child Route</a>
The routerLink directive accepts string paths, arrays for dynamic segments, and supports relative navigation with ./ and ../. The routerLinkActive directive automatically adds CSS classes to active links. You can pass query parameters and fragments using the queryParams and fragment properties. Arrays allow building dynamic routes with parameters like /users/123.
Best Practice Note:
This routerLink approach is used throughout CoreUI’s Angular templates for consistent, fast navigation. Always use routerLink instead of href for internal navigation to maintain SPA behavior and consider using exact matching with routerLinkActiveOptions for precise active state control.
