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 rating.component.ts file are not working. My project is compiling because I can add text to my rating component template and it will show up on the webpage, but I cannot see the CSS that suppose to be rendered.

My app component:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
        <rating></rating>
     `,
  styleUrls: ['./app.component.css']
})

export class AppComponent {
}

My rating component:

import { Component } from '@angular/core';

@Component({ 
    selector: 'rating', 
    template: `                   
        <i class="star" 
        [class.star-empty-icon]="rating < 1" 
        [class.star-full-icon]="rating >= 1" 
        (click)="onClick(1)">
        </i>
        <i class="star" 
        [class.star-empty-icon]="rating < 2" 
        [class.star-full-icon]="rating >= 2" 
        (click)="onClick(2)">
        </i>
    `
})
export class RatingComponent{ 
    rating = 0; 
    onClick(ratingValue){ 
        this.rating = ratingValue; 
    } 
}

My Css:

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

yes! adding :before in the CSS worked. @serpent5 – GlobalJim Dec 16 '17 at 22:56 — GlobalJim, Dec 16 '17 at 22:56

score 85 · Accepted Answer · edited Dec 16 '17 at 23:03

85

I believe the problem you’re having is because you’re declaring the styleUrls on the parent component and due to encapsulation they are not available in the child component. You have to move it to the rating component.

In case you want to keep it on the level you currently have you need to make the view encapsulation none on the rating component.

selector: 'rating',
encapsulation: ViewEncapsulation.None

I believe you also are misusing the content css property. You need to used either the ::before or ::after pseudo elements

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

edited Dec 16 '17 at 23:03

Kirk Larkin

84,915
16
214
203

answered Dec 16 '17 at 22:31

Hugo Noro

3,145
2
13
19

This did not work. Still a blank page. Thank you for the information though. – GlobalJim Dec 16 '17 at 22:35
But are the classes set on the elements? – Hugo Noro Dec 16 '17 at 22:41
Correct. I see this: – GlobalJim Dec 16 '17 at 22:43
And you did move the styleUrls to the ratings component, right? – Hugo Noro Dec 16 '17 at 22:45
Yes, it is in the rating.component.ts. – GlobalJim Dec 16 '17 at 22:46
Can you try applying the start-empty-icon directly on the class instead of the class binding? To try and trace of it’s an issue with the evaluation of the expression. And can you try adding a different style like background colour or so to see if anything happens? – Hugo Noro Dec 16 '17 at 22:51
Okay. It has something to do with the elements. I added a
to the template in ratings component with some styles defined in the same css file and the div's styles worked.
– GlobalJim Dec 16 '17 at 22:55
I believe you have to use the pseudo element ::before or ::after to set the content. https://developer.mozilla.org/en-US/docs/Web/CSS/content – Hugo Noro Dec 16 '17 at 22:58
very interesting! – petrosmm Dec 09 '21 at 17:35

Günter Zöchbauer · Answer 2 · 2019-04-19T05:38:51.627

22

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

edited Apr 19 '19 at 05:38

answered Dec 16 '17 at 22:31

Günter Zöchbauer

623,577
216
2,003
1,567

This did not work. Still a blank page. Thank you for the information though. – GlobalJim Dec 16 '17 at 22:35
2

ng-deep is soon to be deprecated :) – Hugo Noro Dec 16 '17 at 22:36
No, it isn't. It will be remobed when all browsers work well with `Native` and `Emulated` is no lonher needed. – Günter Zöchbauer Dec 16 '17 at 22:37
Have you checked the DOM if the classes are set as expected? – Günter Zöchbauer Dec 16 '17 at 22:39
I get this: – GlobalJim Dec 16 '17 at 22:43
`_ng-content...` is added for style encapsulation. I'd check the added stylesand investigate why the selectors don't match. – Günter Zöchbauer Dec 16 '17 at 22:45
1

Example should start with ::ng-deep (instead of :ng-deep). Double colon is necessary. – Mutual Exception Apr 19 '19 at 05:03

score 1 · Answer 3 · answered Oct 01 '20 at 16:03

If you do not want to mess with ViewEncapsulation and still have the styles isolation, you can define the style within your global css file (e.g. styles.scss) by prefixing the component selector:

rating .star.star-full-icon{
    content:'X';
}

This was tested in an Angular 10 web application.

CSS is not working in my angular component

3 Answers3

Linked