How to get global selector inside emulated view encapsulation (CSS / Angular2)

Question

I have a Home component with this inside:

<alert type="info">Hello from ng2-bootstrap</alert>

Inside my home.style.scss, I have this:

:host .alert {
  background-color: green;
}

which should change the background color to green, but it does not.

The above css code will produce this style:

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3] {
  background-color: green;
}

and the final HTML looks like this:

<home _nghost-wjn-3="">
  <div _ngcontent-wjn-3="" class="card-container">
    <alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
      <div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
        Hello from ng2-bootstrap  Sat Sep 17 2016
      </div>
    </alert>
  </div>
</home>

I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:

[_nghost-wjn-3]   .alert

instead of:

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3]

Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?

Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).

I'm using the default view encapsulation (emulated) in the home component.

How can I do that please?

score 3 · Accepted Answer · answered Sep 17 '16 at 15:20

I figured it out myself. This is what I was looking for:

:host /deep/ .alert {
  background-color: green;
}

The above code will produce the following:

[_nghost-wjn-3] .alert {
  background-color: green;
}

This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.

Source: https://angular.io/docs/ts/latest/guide/component-styles.html

score 0 · Answer 2 · answered Sep 17 '16 at 14:13

0

You need:

[_nghost-wjn-3] alert[_ngcontent-wjn-3]

Instead of:

[_nghost-wjn-3] .alert[_ngcontent-wjn-3]

If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.

answered Sep 17 '16 at 14:13

Edmundo Santos

8,006
3
28
38

That's right but I need to set the background-color of the `
...
` element, not the `` element. How do you set up your selector then? I tried this: `:host alert .alert { background-color: green; }`, which creates: `[_nghost-wjn-3] alert[_ngcontent-wjn-3] .alert[_ngcontent-wjn-3] { background-color: green; }` but this style won't apply because `
...
` has no `_ngcontent-wjn-3`. Is there a way to tell the css to not append the `[_ngcontent-wjn-3]` to the .alert? – Jakub Sep 17 '16 at 14:26

How to get global selector inside emulated view encapsulation (CSS / Angular2)

2 Answers2