ng-custom-rating

ng-custom-rating

star rating library built for angular

Features

• You can use your own icons for rating selection

• User can select half rating (eg 1.5,2.5,3.5 .....)

How to use

• Download star icons from this link(or you can use your own icons)

• npm i ng-custom-rating

using package

.....
...
import { NgCustomRatingModule } from 'ng-custom-rating';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
 ..... ,
    NgCustomRatingModule
  ]

Example

app.componenet.html

<custom-ratings 
[UncheckedIcon] ='"assets/images/emptyStar.svg"'
[CheckedIcon] ='"assets/images/fullstar.svg"'
[HalfCheckedIcon] ='"assets/halfstar.svg"'
[Iconwidth] = "'25'"
[RatingCount] = 5
[DisableHalfRating] = false
[DefaultRating] = 2
[disableSelect] = false
(selectedRating)='getRating($event)'
></custom-ratings >

app.componenet.ts

  getRating(data){
  console.log(data)
}

Input Parameters

Name	value / type	Description
UncheckedIcon	String	File path of icon used to show unchecked icon
CheckedIcon	String	File path of icon used to show checked icon
HalfCheckedIcon	String	File path of icon used to show halfchecked icon
Iconwidth	string	Width of the rating icons
RatingCount(optional)	Number	Total number of icons used for rating selection( if not given , default value will be 5)
DisableHalfRating(optional)	boolean	disables the user from selecting half stars
DefaultRating	Number	pre populate the rating ui with selected icons
disableSelect	boolean	used to diable the rating selection
selectedRating	Eventemitter	used to get the selected rating count