Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

ui router active state css

Suggested Videos
Part 47 - Angular ui router default route
Part 48 - AngularJS ui router custom data
Part 49 - AngularJS ui router html5mode

In this video we will discuss how to highlight the navigation menu item if the user is currently on that page

Let us understand this with an example. If the user is on the "home page", then we want to highlight "Home" menu item on the left. Similarly, if the user is on the "courses" page, highlight "Courses" and when on "students" page highlight "Students" menu item.

ui router ui-sref-active

Here are the steps to achieve this

Step 1 : Create a CSS class that you want to be applied when a state is active. I named the css class activeState. You can give it any meaningful name. This class should be in Styles.css


Step 2 : Modify links in index.html as shown below. ui-sref-active directive will automatically apply the specified css class when the respective state is active and removes the class when it is inactive.

<a ui-sref="home" ui-sref-active="activeState">Home</a>
<a ui-sref="courses" ui-sref-active="activeState">Courses</a>
<a ui-sref="students" ui-sref-active="activeState">Students</a>

AngularJS tutorial for beginners

1 comment:

  1. ui-sref-active was not identified in Mozilla firefox


It would be great if you can help share these free resources