The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Angular’s RouterLink directive to create a template link that navigates to a route in your application. Import it from @angular/router, add it to a standalone component’s imports, and apply it to an anchor. The destination must match a route in your app’s configuration.
How to add a basic RouterLink
In a standalone component, import RouterLink and include it in the component’s imports array. Then add routerLink to an anchor:
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 {}Angular’s RouterLink API reference describes the directive as making a template element a link that initiates navigation to a route. Angular’s router matches the destination against the app’s route configuration and renders the routed component at a RouterOutlet. For in-app navigation, the client-side router updates the application without requesting a full page reload.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Choose a string path or command array
A string is concise for a fixed destination. Use an array of route commands when you need to build a path from segments or insert a dynamic value.
#1 Best Overall
| Use | Example | When it fits |
|---|---|---|
| String path | routerLink="/user-profile" |
A straightforward, fixed route. |
| Command array | [routerLink]="['/users', userId]" |
A route assembled from segments, including a parameter value. |
For example, if userId is 42, the array supplies the path segments for /users/42. For multiple segments, you can write [routerLink]="['/team', teamId, 'user', userId]". The router interprets commands relative to the current URL unless the first path segment begins with /.
Pass a route parameter
Bind an array to routerLink to include a dynamic route value:
<a [routerLink]="['/users', userId]">View user</a>With a route configured to accept a user ID, this generates a link to that user’s route. The parameter value comes from the component; ensure it is available when Angular evaluates the template.
Understand absolute and relative links
A leading slash starts at the application root. A path without a leading slash, or one prefixed with ./, resolves relative to the current activated route. Use ../ to move up one level in the route tree. This distinction matters in nested routes: the same command can resolve to different URLs depending on the current route.
Rank #3
/usersstarts from the app root.usersand./usersresolve relative to the current activated route.../usersmoves up one route level before resolvingusers.
Add query parameters or a fragment
Use the queryParams and fragment inputs alongside a route command array when the destination also needs a query string or URL fragment:
<a [routerLink]="['/user', userId]"
[queryParams]="{tab: 'details'}"
fragment="education">
User details
</a>This link includes a tab=details query parameter and an education fragment. With queryParamsHandling, you can merge new query values with current ones or preserve the current query values, rather than replacing them.
When to use RouterLink instead of Router.navigate()
Use RouterLink when navigation is represented by a link in the template. Use Router.navigate() when application code must decide to navigate in response to logic or state. For example, a user-facing link belongs naturally in the template; a redirect after an operation may be initiated from component code. Angular’s routing guide covers the router’s broader role in mapping URLs to components.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteInputs and compatibility notes
routerLinkaccepts a string, an array of route commands, aUrlTree, ornull/undefined. A null or undefined value effectively disables the link.- The
relativeTo,preserveFragment,queryParams,queryParamsHandling, andfragmentinputs cannot be used with aUrlTreeinput. - If you apply
RouterLinkto a custom element, that element must implement thehrefattribute and includehrefin itsobservedAttributes.
The directive also exposes options such as state, replaceUrl, and skipLocationChange. Use these only when their specific history, navigation-state, or URL-display behavior is needed; ordinary route links do not require them. See the RouterLink API reference for the full input list and details.
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.
