@sreyaj/ng-star-rating

A Simple and Customizable SVG based Star Rating Component For Angular

Usage no npm install needed!

<script type="module">
  import sreyajNgStarRating from 'https://cdn.skypack.dev/@sreyaj/ng-star-rating';
</script>

README

SVG Based Angular Star Rating Component

Simple Rating Component for your next Angular Project. Very simple to setup and use and comes with a lot of customizations.

User Ratings Card

Features

  • Simple and Easy to Setup
  • Ease to use
  • SVG based super light
  • Material Spec Icons for Standard Feel
  • Zero Dependencies
  • Supports half-star rating
  • Supports Rating Mode and also Display only Mode

How to Use the Component

Install the package using the command:

npm i @sreyaj/ng-star-rating

Import the StarRatingModule into your module

import { StarRatingModule } from '@sreyaj/ng-star-rating';
@NgModule({
  ...
  imports: [StarRatingModule],
  ...
})
export class AppModule {}

Now you can use the component inside your application

<ngx-star-rating></ngx-star-rating>

You can now customize it with the following attributes

Eg with few options:

<ngx-star-rating [total]="5" [filledColor]="'#ff0000'"></ngx-star-rating>

Customizations

Feature Description Attribute Type Default
No of Stars You can change the total rating number total number 5
Display Mode Star Rating component can be used to just display the rating readonly boolean false
Type of Stars The component supports filled stars and hollow stars design type filled or hollow hollow
Rating Color The color for the filled Stars filledColor string #3db700
Rating Color The color for the empty Stars emptyColor string #e0e0e0
Rating Event Rating Emitted when user clicks on the rating rated number nil

Feel free to open Issues and Pull Requests