If you tabs like this,
<ngb-tabset [destroyOnHide]="false" activeIds="ngb-tab-1">
<ngb-tab>
<ng-template ngbTabTitle>Stores</ng-template>
<ng-template ngbTabContent>
<app-create-role></app-create-role>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>Coupons</ng-template>
<ng-template ngbTabContent>
<app-manage-project></app-manage-project>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>Categories</ng-template>
<ng-template ngbTabContent>
<app-workflow></app-workflow>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>Products</ng-template>
<ng-template ngbTabContent>
<app-configuration></app-configuration>
</ng-template>
</ngb-tab>
</ngb-tabset>
and now like to change the color then do this way,
/* this is for clicked or active tabs */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background-color: #F4F4F4;
color: #2E2A25;
font-size: 15px;
font-weight: bold;
}
/* this is for normal tabs */
.nav-tabs .nav-link{
background-color: #2E2A25;
color: #F4F4F4;
font-size: 15px;
font-weight: bold;
padding: 5px 25px;
}
If you are using nested tabs and need to have two different styles for both, then you can use like this,
<div class="innerTab">
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs" style="margin-left:10px;margin-bottom:5px;">
<li [ngbNavItem]="1">
<a ngbNavLink>Global</a>
</li>
</ul>
</div>
and your styles will be,
/* this is for clicked or active tabs */
.innerTab .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background-color: blue;
color: white;
font-size: 15px;
font-weight: bold;
}
/* this is for normal tabs */
.innerTab .nav-tabs .nav-link{
background-color: white;
color: blue;
font-size: 15px;
font-weight: bold;
padding: 5px 25px;
}