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.

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