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!

stackoverflow.com/questions/34542143/… might help (shadow piercing) — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 27, 2016 at 5:25
It worked, thanks! But I'm worried these piercing styles will be global. — Martín Coll
– Martín Coll, Commented Sep 27, 2016 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
– Günter Zöchbauer, Commented Sep 27, 2016 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
– Martín Coll, Commented Sep 27, 2016 at 17:20
Can you please edit your question and add the code that demonstrates what you tried? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 27, 2016 at 17:20

Günter Zöchbauer · Accepted Answer · 2016-09-27 17:30:23Z

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, 2016 at 17:30

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Martín Coll Over a year ago

Thanks a lot! I thought :host >>> == /deep/ and didn't realize I was missing :host :)

Günter Zöchbauer Over a year ago

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 :-/

Martín Coll Over a year ago

For the record, I'm using sass and /deep/ :)

Günter Zöchbauer Over a year ago

You chose well ;-) github.com/angular/angular/issues/7108#issuecomment-246386451

Junaid · Accepted Answer · 2020-05-28 11:41:25Z

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, 2020 at 11:41

Junaid

4,9741 gold badge39 silver badges46 bronze badges

answered Oct 3, 2019 at 6:01

Brady Huang

2,04023 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to style ng-bootstrap components in Angular 2

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related