How to style ng-bootstrap components in Angular 2

Question

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!

http://stackoverflow.com/questions/34542143/load-external-css-style-into-angular-2-component/34963135#34963135 might help (shadow piercing) — Günter Zöchbauer, Sep 27 '16 at 05:25
It worked, thanks! But I'm worried these piercing styles will be global. — Martín Coll, Sep 27 '16 at 16:35
What do you mean with "global"? If you start the selector with `:host ...` then they are only applied to this component and it's children. — Günter Zöchbauer, Sep 27 '16 at 16:36
My style doesn't seem to be scoped for that element ```css [_nghost-epe-11] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .license-circle[_ngcontent-epe-11] { .... } .tooltip.in { opacity: 1; } .tooltip .tooltip-inner { padding: 0.5rem; ... } ``` — Martín Coll, Sep 27 '16 at 17:20
Can you please edit your question and add the code that demonstrates what you tried? — Günter Zöchbauer, Sep 27 '16 at 17:20

score 10 · Accepted Answer · answered Sep 27 '16 at 17:30

10

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

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

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

answered Sep 27 '16 at 17:30

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks a lot! I thought `:host >>>` == `/deep/` and didn't realize I was missing `:host` :) – Martín Coll Sep 27 '16 at 17:40
I see. Yes `>>>` and `/deep/` are interchangeable. It was mentioned somewhere that one of them works better in SASS but I don't remember which :-/ – Günter Zöchbauer Sep 27 '16 at 17:41
1

For the record, I'm using sass and `/deep/` :) – Martín Coll Sep 27 '16 at 17:42
2

You chose well ;-) https://github.com/angular/angular/issues/7108#issuecomment-246386451 – Günter Zöchbauer Sep 27 '16 at 17:44

score 4 · Answer 2 · edited May 28 '20 at 11:41

4

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.

edited May 28 '20 at 11:41

Junaid

4,682
1
34
40

answered Oct 03 '19 at 06:01

Brady Huang

1,852
20
23

How to style ng-bootstrap components in Angular 2

2 Answers2