[routerLink] directive

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

Lets you link to specific routes in your app.

Consider the following route configuration:

[{ path: 'user/:name', component: UserCmp }].

When linking to this user/:name route, you use the RouterLink directive.

If the link is static, you can use the directive as follows:

<a routerLink="/user/bob">link to user component</a>

If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.

For instance ['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob;details=true.

Multiple static segments can be merged into one (e.g., ['/team/11/user', userName, {details: true}]).

The first segment name can be prepended with /, ./, or ../:

  • If the first segment begins with /, the router will look up the route from the root of the app.
  • If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.
  • And if the first segment begins with ../, the router will go up one level.

You can set query params and fragment as follows:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component

RouterLink will use these to generate this link: /user/bob#education?debug=true.

You can also tell the directive to preserve the current query params and fragment:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
  link to user component

You can tell the directive to how to handle queryParams, available options are:

  • 'merge': merge the queryParams into the current queryParams
  • 'preserve': preserve the current queryParams
  • default/'': use the queryParams only

The router link directive always treats the provided input as a delta to the current url.

For instance, if the current url is /user/(box//aux:team).

Then the following link <a [routerLink]="['/user/jim']">Jim</a> will generate the link /user/(jim//aux:team).