Angular RouterLink Example

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.

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 On the click on above link, application will navigate to /customers/items URL.
Ex-2 When user clicks on the link, application will navigate to below URL. 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. active is our CSS class that will be applied on link 'Ram' when the route /emp/101 is navigated successfully.
2. We can specify more than one CSS classes to routerLinkActive in following ways.

3. Properties of RouterLink

Find the properties of RouterLink directive and their usages.
1. queryParams sets query parameters. Created URL: 2. fragment sets hash fragment. Created URL: 3. queryParamsHandling decides how to handle query parameters for the next navigation. Its values are preserve and merge. When we use merge, the current and new query parameters are merged.
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: HTML code: 5. state accepts the state defined by us to pass to any navigation. The state values are persisted to History.state property. 6. preserveFragment preserves the current URL fragment to next navigation. Its values are boolean. Default value is false. 7. skipLocationChange is a boolean property. When its value is true, URL will not change in the browser and navigation happens without pushing new state into history. 8. replaceUrl is a boolean property. When its value is true, it navigates replacing the current state in the history.

4. Properties of routerLinkActive

Find the properties of routerLinkActive 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. 2. routerLinkActiveOptions configures when the router link should be active. For example, add CSS classes only when URL matches exactly. Find code snippet to use routerLinkActiveOptions with exact boolean property. The default value of exact is false. When the value of exact is true, CSS class will be added to link only when current route is exactly /books/10 but for the route /books/10/15 , CSS class will not be added.
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: HTML code:

5. Creating Tabs

Find an example to create tabs using routerLink directive. Here I have three tabs that will open URL assigned to routerLink. I have created a CSS class with name active. When a tab is clicked, the active class is added to that <a> element.
Tabs can also be created using <button> element. Find the output screen.

6. References