Home » Angular RouterLink

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

Property Description
@Input()
queryParams?: Params | null
Passed to Router#createUrlTree as part of the UrlCreationOptions.
See also:
UrlCreationOptions#queryParams
Router#createUrlTree
@Input()
fragment?: string
Passed to Router#createUrlTree as part of the UrlCreationOptions.
See also:
UrlCreationOptions#fragment
Router#createUrlTree
@Input()
queryParamsHandling?: QueryParamsHandling | null
Passed to Router#createUrlTree as part of the UrlCreationOptions.
See also:
UrlCreationOptions#queryParamsHandling
Router#createUrlTree
@Input()
preserveFragment: boolean
Passed to Router#createUrlTree as part of the UrlCreationOptions.
See also:
UrlCreationOptions#preserveFragment
Router#createUrlTree
@Input()
skipLocationChange: boolean
Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.
See also:
NavigationBehaviorOptions#skipLocationChange
Router#navigateByUrl
@Input()
replaceUrl: boolean
Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.
See also:
NavigationBehaviorOptions#replaceUrl
Router#navigateByUrl
@Input()
state?: { [k: string]: any; }
Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.
See also:
NavigationBehaviorOptions#state
Router#navigateByUrl
@Input()
relativeTo?: ActivatedRoute | null
Passed to Router#createUrlTree as part of the UrlCreationOptions. Specify a value here when you do not want to use the default value for routerLink, the current activated route. Note that a value of undefined here will use the routerLink default.
See also:
UrlCreationOptions#relativeTo
Router#createUrlTree
@Input()
routerLink: string | any[]
Write-Only
Commands to pass to Router#createUrlTree.
Array: commands to pass to Router#createUrlTree.
string: shorthand for an array of commands with just the string, i.e. [‘/route’]
null|undefined: shorthand for an empty array of commands, i.e. []
urlTree: UrlTree Read-Only

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:


You may also like