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