Advanced, customizable, Optimized ,Minimal, light-weight Angular ratings.
A fully customizable and feature-rich Angular standalone component for advanced star ratings with precision and responsive design
If you like this plugin, please give it a star ⭐.
Install it with npm
npm i rm-ng-star-rating
yarn: yarn add rm-ng-star-ratingImport RmNgStarRatingComponent in your component imports.
import { RmNgStarRatingComponent } from 'rm-ng-star-rating';
@Component({
standalone: true,
selector: 'app',
template: `
<rm-ng-star-rating
[rating]="4"
[starCount]="5"
[color]="'yellow'"
[size]="'24px'"
[emptyColor]="'lightgray'"
[readOnly]="false"
(ratingUpdated)="onRatingUpdated($event)"
></rm-ng-star-rating>
`,
styleUrl: './example.component.scss',
imports: [RmNgStarRatingComponent]
})
export class AppComponent {
onRatingUpdated(newRating: number) {
console.log('New Rating:', newRating);
}
}| Version | Ng |
|---|---|
| 1.x.x | 18.x |
| Name | Description | Default |
|---|---|---|
| [rating] | Current rating to be displayed on load | 0 |
| [starCount] | Number of start to be display on load | 5 |
| [color] | Color to be display on mouse over | yellow |
| [readonly] | A flag that indicates if rating can be changed | false |
| [emptyColor] | Display default star color | lightgray |
| [size] | Font size for start in px |
24 |
| (ratingUpdated) | A stream that emits when the rating value is changed |
If you identify any errors in this component, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!
Are you interested in this library but lacks features? Write to the author, he can do it for you.
Decimal value - Showing and highlight in decimal to star.
Tooltip - Display tooltip once mouse over
Rajat Malik