How to enable li focus in AngularJS while reusing a nav component?

I am designing a vertical navbar where the user clicks on the list item link and it will route to another component and at the same time change it to gray. I am currently re-using the gallery vertical nav component on each of the arts/nature/animals component.

However the behaviour is not expected when the user is routed to another component, I have to click the same list item link then it will be set to focus. I tried this on a normal html/css. It works perfectly but it does not work in Angular.

Could someone help me with this?

gallery.component.html

<nav>
    <ul>
        <li tabIndex="1"><a routerLink="/arts">Arts</a></li>
    </ul>

    <ul>
        <li tabIndex="1"><a routerLink="/nature">Nature</a></li>
    </ul>

    <ul>
        <li tabIndex="1"><a routerLink="/animals">Animals</a></li>
    </ul>
</nav>

gallery.component.css

ul {
    list-style: none;
}

li {
    padding: 10px;
    border: 1px solid #d1d1d1;
}

/* handles when user is focusing on a menu */
li a:focus {
   background-color: #8a8a8a !important;
   color: white;
}