title: Angular 6 - ng-bootstrap - Style Tabs
body: <p>I'm having this bootstrap tabs</p>
  
  <pre><code>&lt;ngb-tabset&gt;
      &lt;ngb-tab title="Tab 1"&gt;
          &lt;ng-template ngbTabContent&gt;
              Tab 1
          &lt;/ng-template&gt;
      &lt;/ngb-tab&gt;
      &lt;ngb-tab title="Tab 2"&gt;
          &lt;ng-template ngbTabContent&gt;
              Tab 2
          &lt;/ng-template&gt;
      &lt;/ngb-tab&gt;
  &lt;/ngb-tabset&gt;
  </code></pre>
  
  <p>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</p>
  
  <p>I know that I can style children components but it doesn't work in this case (<a href="https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file">How to style child components from parent component&#39;s css file?</a>). Any advice?</p>
  
  <pre><code>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;
   }
  `
  ],
  </code></pre>