Angular 6 - ng-bootstrap - Style Tabs

Question

I'm having this bootstrap tabs

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

The text color on the tabs is blue. I know that if I create global styles I can override the defaults. But I want to style the tabs from the parent component

I know that I can style children components but it doesn't work in this case (How to style child components from parent component's css file?). Any advice?

styles: [
`
 :host { color: red; }

 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }
`
],

score 13 · Accepted Answer · answered Jun 03 '18 at 21:43

For the following template which uses ng-bootstrap tabs:

<ngb-tabset class="tabset1">
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

you can override the default tab title style with these CSS rules:

:host ::ng-deep .tabset1 a.nav-link {
  color: green;
}

:host ::ng-deep .tabset1 a.nav-link.active {
  color: red;
  font-weight: bold;
}

See this stackblitz for a demo.

Note: If the attribute class="tabset1" is not set on the ngb-tabset element, the selector .tabset1 should be removed from the CSS styles.

Angular 6 - ng-bootstrap - Style Tabs

1 Answers1