Angular RouterLink

When applied to an element in a template, it creates a link to that element that initiates navigation on a route. Opens one or more routed components in one or more <router-outlet> locations on the navigation page.

Selectors

Properties

Description

Given the route configuration [{path: 'user/:name', component: UserCmp }] , the following creates a static link to the route: <a routerLink="/users/bob">Link to the user component</ a>

You can use dynamic values to generate links. For dynamic links, pass an array of path segments, followed by a parameter for each segment. For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.

Multiple static segments can be merged into one term and combined with dynamic segements. For example, ['/team/11/user', userName, {details: true}]

The input that you provide to the link is treated as a delta to the current URL. For instance, suppose the current URL is /user/(box//aux:team). The link <a [routerLink]="['/user/jim']">Jim</a> creates the URL /user/(jim//aux:team). See createUrlTree for more information.

You can use absolute or relative paths in a link, set query parameters, control how parameters are handled, and keep a history of navigation states.

Relative link paths

The name of the first section can be appended with /,/, or ../.

If the first segment starts with / , the router looks up the route from the app's route.

If the first segment begins with ./ or does not begin with a slash, the router looks into the children of the current active route.

If the first section begins with ../ , the router moves up one level in the root tree.

Setting and handling query params and fragments

The following link adds a query parameter and a fragment to the generated URL:

By default, the directive constructs the new URL using the given query parameters. The example generates the link:

You can instruct the directive to handle query parameters differently by specifying the queryParamsHandling option in the link. Allowed values are:

'merge': Merge the given queryParams into the current query params.

'preserve': Preserve the current query params.

For example:

Preserving navigation history

You can provide a state value to be persisted to the browser's History.stateproperty. For example:

Use Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the tracingId during the NavigationStart event: