Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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

.activeState{
    background-color:black;
    color:white
}

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

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.