@zulkarnainshah/ng-rating-bar

NgRatingBar

ng-rating-bar is a fully customizable rating bar component for Angular based applications. It supports displaying read-only ratings, editable ratings, average ratings, customizable icons/images to use in place of the default stars and much more.

This library was generated with Angular CLI version 13.2.0.

Installation

1. Run npm i @zulkarnainshah/ng-rating-bar to install the library

2. Create a new folder named ng-rating-bar inside your assets folder

3. Modify your angular.json file to add the following object to the assets array after the src/assets line :

   "assets":[ "src/favicon.ico", "src/assets",

   {
     "glob": "**/*",
     "input": "./node_modules/@zulkarnainshah/ng-rating-bar/assets",
     "output": "./assets/ng-rating-bar"
   }

   ]

Import

1. In your app.module.ts file add the following import:

import NgRatingBarModule from @zulkarnainshah/ng-rating-bar

2. Then add NgRatingBarModule in the imports array of app.module.ts:

imports: [...., NgRatingBarModule]

Using custom images for stars (optional):

By default 3 image resources are included with the library for showing filled, half and empty stars. You can modify the images for each of those states by supplying your own images. Just place your png images (at least 256 x 256) inside the assets folder (not necessarily inside the ng-rating-bar folder) and pass their path as input parameters to the component for the following attributes:

• filledImgSrc
• halfFilledImgSrc
• emptyImgSrc

Basic usage

You can use the component in any of your templates like below:

Example 1 : Using default 5 as totalStars and setting the rating to 4.

<ng-rating-bar
[rating]="4">
</ng-rating-bar>

Example 2 : 6 totalStars with fractional rating

<ng-rating-bar
  [rating]="1.5"
  [totalStars]="6">
</ng-rating-bar>

Example 3: Changing the default size of the star images

<ng-rating-bar
  [rating]="1.5"
  [totalStars]="10"
  size="40px">
</ng-rating-bar>

Example 4: Using custom images for filled, half-filled and empty stars

<ng-rating-bar
  [rating]="3.5"
  [totalStars]="5"
  size="25px"
  filledImgSrc="../../assets/tomato.png"
  halfFilledImgSrc="../../assets/tomato_half.png"
  emptyImgSrc="../../assets/tomato_empty.png">
</ng-rating-bar>

Example 5: Disabling mouse events by passing true to the disabled property

<ng-rating-bar
  [rating]="3"
  [totalStars]="5"
  [disabled]="true"
  >
</ng-rating-bar>

Example 6: Handling ratingChanged event

<ng-rating-bar
  [rating]="3.5"
  [totalStars]="5"
  (ratingChanged)="onRatingChanged($event)">
</ng-rating-bar>

onRatingChanged method you will implement in your component and the $event parameter will contain the new rating (number type)

Properties table

Name	Type	Required	Default
rating	number	optional	0
totalStars	number	optional	5
size	string	optional	20px
filledImgSrc	string	optional	assets/ng-rating-bar/star_filled.png
halfFilledImgSrc	string	optional	assets/ng-rating-bar/star_half.png
emptyImgSrc	string	optional	assets/ng-rating-bar/star_empty.png
disabled	boolean	optional	false
animateOnHover	boolean	optional	true
gap	string	optional	3px

Events table

Name	Return Type	Required	Fires when
ratingChanged	number	optional	User clicks on a star

Demo