Set class on an element in a parent component

Question

We have a sidebar in the root of the application. The sidebar is a list, and we use uiSrefActive to have an active class on the list item after it is clicked. But when you go somewhere from that component, the original list item loses the class. What I want to do is to give the list element the active class when you navigate from the first loaded component into an other component (which would structurally be the child of the previous component hence the active signal). We also have a breadcrumb component on the top of the page, where the first parent is always the component whose list item should be active. Is there a way to achieve this?

Answer 1

Keeping track of your navigation stack can be done a couple ways.

1. One way would be to create a service and track your navigation there. So if you were to select an item from the sidebar, its active state would be dependent on the service, and so would the breadcrumbs.

2. The other way (and better way IMO) would be to rely on Angular routing. This implies that your navigation is based on Angular's Router.

<h1>Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
<router-outlet></router-outlet>

routerLinkActive will apply a class called 'active' to the a element if the given routerLink is active.

You can also get the active link programmatically from your controllers using the ActivatedRoute provider.