CSS is not working in my angular component

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';
}