Router Links

Go back to Tutorial

Now you have routes configured and a place to render them, but how do you navigate? The URL could arrive directly from the browser address bar. But most of the time you navigate as a result of some user action such as the click of an anchor tag.

Consider the following template:

src/app/app.component.ts (template)

template: `

<h1>Angular Router</h1>

<nav>

<a routerLink=”/crisis-center” routerLinkActive=”active”>Crisis Center</a>

<a routerLink=”/heroes” routerLinkActive=”active”>Heroes</a>

</nav>

<router-outlet></router-outlet>

`

The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink (a “one-time” binding).

Had the navigation path been more dynamic, you could have bound to a template expression that returned an array of route link parameters (the link parameters array). The router resolves that array into a complete URL.

Active router links

The RouterLinkActive directive toggles css classes for active RouterLink bindings based on the current RouterState.

On each anchor tag, you see a property binding to the RouterLinkActive directive that look like routerLinkActive=”…”.

The template expression to the right of the equals (=) contains a space-delimited string of CSS classes that the Router will add when this link is active (and remove when the link is inactive). You set the RouterLinkActive directive to a string of classes such as [routerLinkActive]=”‘active fluffy'” or bind it to a component property that returns such a string.

Active route links cascade down through each level of the route tree, so parent and child router links can be active at the same time. To override this behavior, you can bind to the [routerLinkActiveOptions] input binding with the { exact: true } expression. By using { exact: true }, a given RouterLink will only be active if its URL is an exact match to the current URL.

Go back to Tutorial