ngx-advanced-rating-stars

https://ibb.co/QcV35DJ

Installation

npm install ngx-advanced-rating-stars@latest

Usage

ngModule

import { NgxAdvancedRatingStarsModule } from 'ngx-advanced-rating-stars'

@NgModule({
    ...
    imports: [
		...
        NgxAdvancedRatingStarsModule
        
    ]
})

angular.json

"build": {
	...
	"assets": [
		{
			"glob": "**/*",
			"input": "./node_modules/ngx-advanced-rating-stars/images",
			"output": "./assets/images"
		}
	]
}

template

<ngx-advanced-rating-stars 
	[ratings]="ratings" 
	[style]="ratingStyle" 
	[showRatingInNumericFormat]="true" 
	[percentageBarColor]="barColor">
</ngx-advanced-rating-stars>

component

ratings = [5, 5, 5, 5, 5, 4, 4, 4, 3, 2, 1, 1, 2]
    
ratingStyle = {
	starsStyle: {'height' : '22px', 'width' : '22px'},
	ratingStyle: {'font-size' : '18px'},
	countStyle: {'font-size' : '14px'}
}

barColor:string = rgb(45, 140, 200)

percentageBarColor accepts colors name too, "orange" for example.

Demo

https://stackblitz.com/github/AndreaDiCioccio/ngx-advanced-rating-stars-demo