Free tools Windows power users keep installed
One-click scans. No signup required.
Use Angular’s RouterLink directive on a template link to navigate to a route inside your application. Import RouterLink from @angular/router, add it to a standalone component’s imports, and set the link’s destination with routerLink.
Basic RouterLink setup
This standalone component links to the /user-profile route:
As an Amazon Associate I earn from qualifying purchases.
import {Component} from '@angular/core';
import {RouterLink} from '@angular/router';
@Component({
standalone: true,
imports: [RouterLink],
template: `<a routerLink="/user-profile">User profile</a>`,
})
export class App {}Use RouterLink where the template should present navigation as a link. The destination needs to match a route configured in the application. Angular’s RouterLink API reference describes the directive as making a template element a link that initiates navigation to a route.
Recommended Free Tools
Choose a string path or command array
Use a string for a straightforward path
A simple route can be written directly as a string:
#1 Best Overall
<a routerLink="/about">About</a>Use an array to build a route
Command arrays are useful when a path has multiple segments or includes values from component data. For example, to link to a user whose ID is stored in userId:
<a [routerLink]="['/users', userId]">View user</a>For a route with several segments, place each segment or dynamic value in the array:
<a [routerLink]="['/team', teamId, 'user', userId]">View team member</a>The directive also accepts a UrlTree or a nullish value. A null or undefined destination effectively disables the link. See the accepted input types and options in the RouterLink API reference.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallResolve links from the right route level
A leading slash makes a destination absolute from the application root. A path without a leading slash, or one prefixed with ./, is resolved relative to the current activated route. Use ../ to move up one level in the route tree.
Rank #3
This distinction matters in nested routes: RouterLink commands are interpreted as a change from the current URL unless you start at the root. If a relative link resolves somewhere unexpected, check which route is active where the link is rendered and whether the destination should begin with /.
Add query parameters and a fragment
Bind query values with queryParams and set a fragment with fragment:
<a [routerLink]="['/user', userId]"
[queryParams]="{tab: 'details'}"
fragment="education">
User details
</a>This builds a link to the user route with a tab=details query parameter and an education fragment. To combine new query parameters with existing ones, use queryParamsHandling; its options include merging new values or preserving the current query values. The API also provides preserveFragment when a link should retain the current fragment.
When supplying a UrlTree as the RouterLink input, the API does not allow queryParams, fragment, queryParamsHandling, preserveFragment, or relativeTo to be used with that input. Check the API reference for the full set of inputs, including navigation state and URL-handling options.
RouterLink or Router.navigate()?
Use RouterLink when navigation is represented by a link in the template. Use Router.navigate() when code needs to decide whether or where to navigate based on application logic or state. Angular’s routing guide explains how routes, links, and routed content fit together.
How navigation fits into an Angular app
Angular routing maps URLs to components, and RouterOutlet marks where routed content is rendered. For in-app navigation, the client-side router updates the application’s routed view rather than requiring a full page request for each route change. The Angular routing guide covers the broader routing setup.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
