|
| 1 | +# Navigate to routes |
| 2 | + |
| 3 | +The RouterLink directive is Angular's declarative approach to navigation. It allows you to use standard anchor elements (`<a>`) that seamlessly integrate with Angular's routing system. |
| 4 | + |
| 5 | +## How to use RouterLink |
| 6 | + |
| 7 | +Instead of using regular anchor elements `<a>` with an `href` attribute, you add a RouterLink directive with the appropriate path in order to leverage Angular routing. |
| 8 | + |
| 9 | +```angular-html |
| 10 | +<nav> |
| 11 | + <a routerLink="/user-profile">User profile</a> |
| 12 | + <a routerLink="/settings">Settings</a> |
| 13 | +</nav> |
| 14 | +``` |
| 15 | + |
| 16 | +### Using absolute or relative links |
| 17 | + |
| 18 | +**Relative URLs** in Angular routing allow you to define navigation paths relative to the current route's location. This is in contrast to **absolute URLs** which contain the full path with the protocol (e.g., `http://`) and the **root domain** (e.g., `google.com`). |
| 19 | + |
| 20 | +```angular-html |
| 21 | +<!-- Absolute URL --> |
| 22 | +<a href="https://www.angular.dev/essentials">Angular Essentials Guide</a> |
| 23 | +
|
| 24 | +<!-- Relative URL --> |
| 25 | +<a href="/essentials">Angular Essentials Guide</a> |
| 26 | +``` |
| 27 | + |
| 28 | +In this example, the first example contains the full path with the protocol (i.e., `https://`) and the root domain (i.e., `angular.dev`) explicitly defined for the essentials page. In contrast, the second example assumes the user is already on the correct root domain for `/essentials`. |
| 29 | + |
| 30 | +Generally speaking, relative URLs are preferred because they are more maintainable across applications because they don’t need to know their absolute position within the routing hierarchy. |
| 31 | + |
| 32 | +### How relative URLs work |
| 33 | + |
| 34 | +Angular routing has two syntaxes for defining relative URLs: strings and arrays. |
| 35 | + |
| 36 | +```angular-html |
| 37 | +<!-- Navigates user to /dashboard --> |
| 38 | +<a routerLink="dashboard">Dashboard</a> |
| 39 | +<a [routerLink]="['dashboard']">Dashboard</a> |
| 40 | +``` |
| 41 | + |
| 42 | +HELPFUL: Passing a string is the most common way to define relative URLs. |
| 43 | + |
| 44 | +When you need to define dynamic parameters in a relative URL, use the array syntax: |
| 45 | + |
| 46 | +```angular-html |
| 47 | +<a [routerLink]="['user', currentUserId]">Current User</a> |
| 48 | +``` |
| 49 | + |
| 50 | +In addition, Angular routing allows you specify whether you want the path to be relative to the current URL or to the root domain based on whether the relative path is prefixed with a forward slash (`/`) or not. |
| 51 | + |
| 52 | +For example, if the user is on `example.com/settings`, here is how different relative paths can be defined for various scenarios: |
| 53 | + |
| 54 | +```angular-html |
| 55 | +<!-- Navigates to /settings/notifications --> |
| 56 | +<a routerLink="notifications">Notifications</a> |
| 57 | +<a routerLink="/settings/notifications">Notifications</a> |
| 58 | +
|
| 59 | +<!-- Navigates to /team/:teamId/user/:userId --> |
| 60 | +<a routerLink="/team/123/user/456">User 456</a> |
| 61 | +<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>” |
| 62 | +``` |
| 63 | + |
| 64 | +## Programmatic navigation to routes |
| 65 | + |
| 66 | +While `RouterLink` handles declarative navigation in templates, Angular provides programmatic navigation for scenarios where you need to navigate based on logic, user actions, or application state. By injecting `Router`, you can dynamically navigate to routes, pass parameters, and control navigation behavior in your TypeScript code. |
| 67 | + |
| 68 | +### `router.navigate()` |
| 69 | + |
| 70 | +You can use the `router.navigate()` method to programmatically navigate between routes by specifying a URL path array. |
| 71 | + |
| 72 | +```angular-ts |
| 73 | +import { Router } from '@angular/router'; |
| 74 | +
|
| 75 | +@Component({ |
| 76 | + selector: 'app-dashboard', |
| 77 | + template: ` |
| 78 | + <button (click)="navigateToProfile()">View Profile</button> |
| 79 | + ` |
| 80 | +}) |
| 81 | +export class AppDashboard { |
| 82 | + private router = inject(Router); |
| 83 | +
|
| 84 | + navigateToProfile() { |
| 85 | + // Standard navigation |
| 86 | + this.router.navigate(['/profile']); |
| 87 | +
|
| 88 | + // With route parameters |
| 89 | + this.router.navigate(['/users', userId]); |
| 90 | +
|
| 91 | + // With query parameters |
| 92 | + this.router.navigate(['/search'], { |
| 93 | + queryParams: { category: 'books', sort: 'price' } |
| 94 | + }); |
| 95 | + } |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +`router.navigate()` supports both simple and complex routing scenarios, allowing you to pass route parameters, [query parameters](/guide/routing/read-route-state#query-parameters), and control navigation behavior. |
| 100 | + |
| 101 | +You can also build dynamic navigation paths relative to your component’s location in the routing tree using the `relativeTo` option. |
| 102 | + |
| 103 | +```angular-ts |
| 104 | +import { Router, ActivatedRoute } from '@angular/router'; |
| 105 | +
|
| 106 | +@Component({ |
| 107 | + selector: 'app-user-detail', |
| 108 | + template: ` |
| 109 | + <button (click)="navigateToEdit()">Edit User</button> |
| 110 | + <button (click)="navigateToParent()">Back to List</button> |
| 111 | + ` |
| 112 | +}) |
| 113 | +export class UserDetailComponent { |
| 114 | + private route = inject(ActivatedRoute); |
| 115 | + private router = inject(Router); |
| 116 | +
|
| 117 | + constructor() {} |
| 118 | +
|
| 119 | + // Navigate to a sibling route |
| 120 | + navigateToEdit() { |
| 121 | + // From: /users/123 |
| 122 | + // To: /users/123/edit |
| 123 | + this.router.navigate(['edit'], { relativeTo: this.route }); |
| 124 | + } |
| 125 | +
|
| 126 | + // Navigate to parent |
| 127 | + navigateToParent() { |
| 128 | + // From: /users/123 |
| 129 | + // To: /users |
| 130 | + this.router.navigate(['..'], { relativeTo: this.route }); |
| 131 | + } |
| 132 | +} |
| 133 | +``` |
| 134 | + |
| 135 | +### `router.navigateByUrl()` |
| 136 | + |
| 137 | +The `router.navigateByUrl()` method provides a direct way to programmatically navigate using URL path strings rather than array segments. This method is ideal when you have a full URL path and need to perform absolute navigation, especially when working with externally provided URLs or deep linking scenarios. |
| 138 | + |
| 139 | +```angular-ts |
| 140 | +// Standard route navigation |
| 141 | +router.navigateByUrl('/products); |
| 142 | +
|
| 143 | +// Navigate to nested route |
| 144 | +router.navigateByUrl('/products/featured'); |
| 145 | +
|
| 146 | +// Complete URL with parameters and fragment |
| 147 | +router.navigateByUrl('/products/123?view=details#reviews'); |
| 148 | +
|
| 149 | +// Navigate with query parameters |
| 150 | +router.navigateByUrl('/search?category=books&sortBy=price'); |
| 151 | +``` |
| 152 | + |
| 153 | +In the event you need to replace the current URL in history, `navigateByUrl` also accepts a configuration object that has a `replaceUrl` option. |
| 154 | + |
| 155 | +```angular-ts |
| 156 | +// Replace current URL in history |
| 157 | +router.navigateByUrl('/checkout', { |
| 158 | + replaceUrl: true |
| 159 | +}); |
| 160 | +``` |
| 161 | + |
| 162 | +## Next steps |
| 163 | + |
| 164 | +Learn how to [read route state](/guide/routing/read-route-state) to create responsive and context-aware components. |
0 commit comments