RouterLink in Angular
March 07, 2024
On this page we will learn to use RouterLink
in our Angular routing application.
1. To create router links, Angular provides following directives.
RouterLink : Creates an HTML element as link to navigate to a specified route.
RouterLinkActive : Tracks whether the link is currently active or not and allows us to add CSS class when link is active.
2. The route when navigated by
RouterLink
, components open in one or more <router-outlet>
.
3. We can pass query parameters using queryParams property and fragment using fragment property.
4.
RouterLink
is used with HTML elements such as <a> and <button> in HTML template.
5. To use
RouterLink
directive, we need to import RouterModule
in our application.
Contents
1. routerLink
routerLink
is the selector of RouterLink
directive. It is applied to HTML elements such as <a> and <button>. When applied to an element, routerLink
makes that element a link to navigate to a specified route. In the navigation, one or more components are opened in one or more <router-outlet> .
Ex-1
<a routerLink="/customers/items">Customers</a>
Ex-2
<a [routerLink]="['customers', 10, 'items', 101]">Customers</a>
/customers/10/items/101
routerLink
accepts an array of URL segments using which we can create URL dynamically. We can pass URL segments followed by path parameters to create URL.
2. routerLinkActive
routerLinkActive
is the selector of RouterLinkActive
directive. It is used with routerLink
directive. In an element, routerLinkActive
tracks whether the linked route is currently active or not. It tracks currently active route by changing elements appearance using one or more specified CSS classes.
routerLinkActive
is used as following.
1.
<a routerLink="/emp/101" routerLinkActive="active">Ram</a>
2. We can specify more than one CSS classes to
routerLinkActive
in following ways.
<a routerLink="/emp/101" routerLinkActive="class1 class2">Ram</a> <a routerLink="/emp/101" [routerLinkActive]="['class1', 'class2']">Ram</a>
3. Properties of RouterLink
Find the properties ofRouterLink
directive and their usages.
1. queryParams sets query parameters.
<a routerLink="/company/emp" [queryParams]="{empId: 101, name: 'Mohit'}" routerLinkActive="active">link</a>
/company/emp?empId=101&name=Mohit
<a routerLink="/book" [queryParams]="{page: 100}" [fragment]="'top'" routerLinkActive="active">link</a>
/book?page=100#top
<a routerLink="/userdetail" [queryParams]="{id: 101, city: 'Varanasi'}" queryParamsHandling="merge">link</a>
When we use preserve, only current parameters are preserved in the next navigation and new parameters are discarded.
4. relativeTo specifies a root URI to enable relative navigation. Assign the instance of
ActivatedRoute
to relativeTo
.
TS code:
constructor(private route: ActivatedRoute){}
<a [routerLink]="['book', 101]" [relativeTo]="route" >link</a>
History.state
property.
<a [routerLink]="['user', 51]" [state]="{appId: 221}" >link</a>
<a [routerLink]="['/book/java']" fragment="bottom" preserveFragment="true" >link</a><
<a [routerLink]="['/user/50']" skipLocationChange="true">link</a>
<a [routerLink]="['/team/emp']" replaceUrl="true" >link</a>
4. Properties of routerLinkActive
Find the properties ofrouterLinkActive
directive and their usages.
1. routerLinkActive property is used to check if link is active or not using template variable. We need to assign
routerLinkActive
to template variable and then call isActive
on that variable.
<a [routerLink]="['/writer/10']" routerLinkActive #routerLnkAct="routerLinkActive"> {{routerLnkAct.isActive}} link </a>
routerLinkActiveOptions
with exact boolean property. The default value of exact is false.
<a [routerLink]="['/books/10']" routerLinkActive="active-class" [routerLinkActiveOptions]="{exact:true}" >link</a>
For
UrlTree
, assign IsActiveMatchOptions
instance to routerLinkActiveOptions
.
3. isActiveChange is an output property that notifies each time the link is active or inactive. It emits true when link is active and emits false when link is inactive.
TS code:
onWriterLinkActive(activeStatus: boolean) { console.log(activeStatus); }
<a [routerLink]="['/writers/10']" routerLinkActive="active" (isActiveChange)="onWriterLinkActive($event)" >Writer</a>
5. Creating Tabs
Find an example to create tabs usingrouterLink
directive.
<nav class = "menu-items"> <ul> <li><a routerLink="/product/" routerLinkActive="active">Products</a></li> <li><a routerLink="/customers/" routerLinkActive="active">Customers</a></li> <li><a routerLink="/help/" routerLinkActive="active">Help</a></li> </ul> </nav>
routerLink
. I have created a CSS class with name active.
.active{ background-color: #4CAF50; }
Tabs can also be created using <button> element.
<li><button routerLink="/product/" routerLinkActive="active">Products</button></li>