CODEWITHSUNDEEP
angularng-bootstrap
Martín Coll
Martín Coll

Reputation: 3794

How to style ng-bootstrap components in Angular 2

I'm trying to apply styles to the ngbTooltip component in my Angular 2 app. I apply the directive as:

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

But since Angular 2 applies style scoping, I can't directly style the .tooltip class in my component's template.

How can I give the tooltips for this specific component a custom styling?

EDIT:

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

.license-circle {
    width: 10px;
    ... other styles
}

/deep/ .tooltip {
    &.in {
        opacity: 1;
    }
}

But then my rendered styles look like:

<style>
.license-circle[_ngcontent-uvi-11] {
  width: 10px; }

.tooltip.in {
  opacity: 1; }
</style>

Which makes me believe the tooltip styles are being un-encapsulated (instead of just piercing this component's children.

Note: I tried :host >>> .tooltip and it didn't work, so I ended up using /deep/.

Thanks!

Upvotes: 11

Views: 9007

Answers (2)

Brady Huang
Brady Huang

Reputation: 2002

For angular version 8.3, ::ng-deep is recommended

::host .license-circle {
  width: 10px;
  ... other styles
}

:host ::ng-deep .tooltip {
  &.in {
    opacity: 1;
  }
}

One thing that we need to remember is that ::ng-deep, /deep/ & >>> have been deprecated in angular 9. So, finding some other long term solution would be a good thing to do at this point. Check out the docs for more.

Upvotes: 4

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657476

As mentioned in the comment, the selectors should start with :host

:host .license-circle {
    width: 10px;
    ... other styles
}

:host /deep/ .tooltip {
    &.in {
        opacity: 1;
    }
}

Upvotes: 10

Related Questions