Angular Star Rating

Advanced, customizable, Optimized ,Minimal, light-weight Angular ratings.

---

RmNgStarRating for Angular

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 ⭐.

Installation

Install it with npm

npm i rm-ng-star-rating
yarn: yarn add rm-ng-star-rating

Live DEMO

See the implementation here

Basic usage:

Import 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 Mapping

Version	Ng
1.x.x	18.x

Rating inputs and outputs:

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

Issues

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!

Author services

Are you interested in this library but lacks features? Write to the author, he can do it for you.

Roadmap

Decimal value - Showing and highlight in decimal to star.
Tooltip - Display tooltip once mouse over

Author

Rajat Malik

• github/malikrajat