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