Taki problem. Mam nava, który filtruje dane w tabeli. Kod po stronie HTML wygląda tak:
<ul class="nav nav-tabs">
<ng-container *ngFor="let cl of classes">
<li class="nav-item">
<a class="nav-link tab-regs"
[ngClass]="{'active': cl.IdClass == current_class, 'tab-overlap': cl.IdClass > 1}"
[ngStyle]="{'z-index': 7 - cl.IdClass}"
(click)="filter_class(cl.IdClass)">{{cl.Name}}</a>
</li>
</ng-container>
</ul>
CSS:
.tab-regs {
background-color: #BDBDBE !important;
box-shadow: 3px 0px 3px rgb(0,0,0, 0.4) !important;
border-radius: 10px 10px 0px 0px !important;
color: #FFFFFF !important;
position: relative;
}
.tab-overlap {
margin-left: -4px;
}
.tab-regs:hover {
background-color: #9C9C9D !important;
}
.tab-regs:active {
background-color: #5A5A5C !important;
}
Problem polega na tym, że wybrany tab nie bierze stylu .tab-regs:active - a ściślej działa tylko wtedy, kiedy mam wciśnięty przycisk - jak puszczam klawisz, to tab wraca do stanu domyślnego, a ściślej - pojawia się biała obwódka naokoło wybranego tabu. Jak usuwam swój styl .tab-regs i zostawiam tego nava na domyślnych stylach BS, to wszystko działa dobrze. Wydaję mi się, że aplikacja bierze styl .nav-link:active a nie .tab-regs:active jak element ma klasę active
Nie wiem czy dobrze wyjaśniłem, ale sprawa dosyć zawiła ;)
Z góry dziękuję za pomoc
HTML 
Bootstrap 
CSS 