Angular - Add active style in header dropdown - css

Question

I´m trying to add active style in buttons when the routes matches.
The dropdown menu elements add active style properly but parent element does not have this style.
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false">{{'entity' |
translate}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/listado']"><i class="fa fa-list"></i> {{'list' | translate}}</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/formulario']"><i class="fa fa-plus"></i> {{'new' | translate}}</a></li>
</ul>
</li>
<li>
</ul>
</div>
So the question is: How can i add active element in parent
{{'entity' | translate}} <span class="caret"></span>
when ul dropdown menu elements is selected?

Answer 1

You could try using the isActive method of the router:
https://angular.io/api/router/Router#isActive
To apply the active class to your parent <a> tag when either of the dropdown menu's routes are active, you could add a [class.active] attribute, as such:
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)"
So on your parent element, it would look like this:
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)">
{{'entity' | translate}} <span class="caret"></span>
</a>