How to create ng-bootstrap components in Angular 2

Question

I am trying to apply styles to the ngbTooltip component in my Angular 2 application. I am applying the directive as:

<div [ngbTooltip]="tooltipText"> Element text </div> 

But since Angular 2 applies the style definition, I cannot directly style the .tooltip class in my component template.

How can I give hints for this particular component custom style?

EDIT:

I have a scss stylesheet attached to my component. My styles (simplified):

 .license-circle { width: 10px; ... other styles } /deep/ .tooltip { &.in { opacity: 1; } } 

But then my rendered styles look like this:

 <style> .license-circle[_ngcontent-uvi-11] { width: 10px; } .tooltip.in { opacity: 1; } </style> 

Which makes me believe that tooltip styles are not encapsulated (instead of just flashing these child components).

Note. I tried :host >>> .tooltip and it did not work, so I used /deep/ .

Thanks!

Answer 1

As stated in the comment, selectors must begin with :host

 :host .license-circle { width: 10px; ... other styles } :host /deep/ .tooltip { &.in { opacity: 1; } } 

Answer 2

For angular version 8.3 recommended :: ng-deep

 ::host .license-circle { width: 10px; ... other styles } :host ::ng-deep .tooltip { &.in { opacity: 1; } }