Add custom class to Tabs - ngbTabTitleClass

Similar to #1349, I was handed a requirement that would be best solved by conditionally setting a class on the <li> generated by ngbTab, using the same type options as ngClass:

<ngb-tabset>
 <ngb-tab *ngFor="let tab of tabs">
  <template ngbTabTitle [ngbTabTitleClass]="tab.classes">tab.title</template>
  <template ngbTabContent>tab.content</template>
 </ngb-tab>
</ngb-tabset>

I’d expect this could be done by adding the input to ngbTabTitle and updating the ngbTabSet template:

@Directive({selector: 'template[ngbTabTitle]'})
export class NgbTabTitle {
  constructor(public templateRef: TemplateRef<any>) {}
  @Input() ngbTabTitleClass: string|string[]|Set<string>|{[klass: string]: any};
}

<li class="nav-item" *ngFor="let tab of tabs" [ngClass]="tab.titleTpl?.ngbTabTitleClass">
  <a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled"
          href (click)="!!select(tab.id)" role="tab" [attr.aria-controls]="tab.id + '-panel'" [attr.aria-expanded]="tab.id === activeId">
    {{tab.title}}<template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></template>
  </a>
</li>

[sunillakhlan]

it worked for me by mentioning style globally as given below. Its not working in component classes.

.nav-tabs .nav-link:hover { background-color: #FFFFFF !important; } .nav-tabs .nav-link:hover a { text-decoration: none; }

[sharathdaniel]

Is there still no way to add class to ul? I already have styles that works based on the class in ul. I don’t want to rewrite the css again.