CSS is not working in my angular component

Question

I am trying to make a simple Angular4 web app that will show and X or O depending on what the rating is. I do not see the X or O in my web app.

The CSS classes in my rat

Answer 1

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

You need to add the CSS (['./app.component.css']) to RatingComponent, otherwise style encapsulation will prevent the CSS to be applied.

Alternatively, you can use ::ng-deep

::ng-deep .star.star-full-icon{
    content:'X';
}
::ng-deep .star.star-empty-icon{
    content:'O';
}

or ViewEncapsulation.None on the RatingComponent

but I'd suggest to stick with the first option.

See also https://blog.thoughtram.io/angular/2015/06/29/shadow