ui router active state css Video Lecture - Learn and Understand AngularJS

this is part 50 of angularjs tutorial in
this video we'll discuss how to
highlight the navigation menu item if
the user is currently on that page let
me explain what I mean at the moment we
are on the home page so the home menu
item is highlighted similarly if we are
on the courses page then we want to
highlight courses menu item if we are on
the students page then highlight
students menu item there are two simple
steps to achieve this the first step is
to create a CSS class that we want to
apply to the menu item that is active so
let's flip to the studio within our
Styles dot CSS I'm going to create the
CSS class I'm going to name this active
state so we want the background color to
be black and the font color to be white
okay so a simple CSS class there with
two properties the second step is to
modify the links that we have in our
index dot HTML so for all these links I
am going to apply a different directive
and that is you I - s ref - active and
the value for this directive is going to
be the CSS class that we have just
created which is active State so let's
include this directive for all the links
that we have this directive is going to
do two things it's going to
automatically apply the CSS class to the
state that is active it is also going to
automatically remove that class from any
state that has become inactive so with
these two changes we should be able to
highlight the menu item that's active so
let's save all these changes and let's
reload this app and see what's going to
happen look at this when I reload the
app at the moment we're on the home page
and notice the home menu item is
highlighted similarly when I click
courses we are on the courses page
courses menu item is highlighted when we
are
students page students menu item is
highlighted so here we have those two
steps that we have just discussed thank
you for listening and have a great day