Angular ui router ui-sref-active on parent

Question

I have one parent state and many childs states. If I want the ui-sref-active on the parent to work when I am on one of the child I need to do this \"ha

Answer 1

Extending Radim Köhler's post. In case you are using an index state with an abstract parent state, such as

Home
Home » Child1
Home » Child2

… and want "Home" to be displayed as active when being on home.child1, you could make use of a CSS-hidden first ui-sref:

  
  Home


  Home » Child1


  Home » Child2

This works since "ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used." per ui-sref-active reference

See this plunker for a demo.