ui router active state css

ui router ui-sref-active
angular ui router ui sref active
angularjs ui-router ui-sref-active
ui router active state class

ui router active state css

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

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

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.

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="studentParent.students" ui-sref-active="activeState"]Students[/a]

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2016/04/ui-router-active-state-css.html