Snippet of HTML code
<div class="card-header">
<h5>Refill by date</h5>
<div class="card-header-right">
<nav class="navbar bg-faded ">
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('branch'); getFranchiseRefillsByDateAndBranch()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By branch</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('product'); getFranchiseRefillsByDateAndProduct()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> By product</i>
</button>
</li>
<li class="nav-item" routerLinkActive="active">
<button (click)="setView('list'); getFranchiseRefillsByDateAndList()" class="btn btn-mini btn-bg-c-blue btn-outline-default btn-round btn-action">
<i class="icofont icofont-ui-check"> Refill list</i>
</button>
</li>
</ul>
</nav>
</div>
</div>
Segment of TypeScript code
getFranchiseRefillsByDateAndBranch() {
this.items = [];
var hrchyIds = this.jwtHelperService.getFRefillHrchyIds();
var ym = this.localStorage.retrieve('frym');
if (hrchyIds) {
this.refillService.getFranchiseRefillsByDateAndYear(hrchyIds, ym, "branch", this.page, this.rec).subscribe(val => {
this.items = val;
});
}
}
CSS snippet for styling
.nav-item.active button i{
color: #3D94CD !important;
}
I'm attempting to modify the color of the active button using router link active, but this approach isn't effective in this scenario. Is there an alternative method to dynamically add a class based on the current click?