Angular Star Rating

Angular 1.5 Component written in typescript, based on css only techniques.

License Bower Version NPM Version
Standard Version

Build Status npm

Package Quality

Angular Star Rating is a >1.5 Angular component written in typescript.
It is based on a fully customizable css only star rating component written in scss.


alt tag


Get Angular Star Rating: - clone & build this repository - download as .zip - via npm: by running $ npm install angular-star-rating from your console - via bower: by running $ bower install angular1-star-rating from your console

Load library html <script src="bower_components/angular-star-rating/dist/index.js"></script>

Inject it into angular javascript angular.module('myApp', ['star-rating'])

Use it html <star-rating-comp size="'large'" rating="3" text="'Rating:'" on-update="crtl.onUpdate(rating)"> </star-rating-comp>

Component Properties

@ bindings

id: string (Optional)
The html id attribute of the star rating
Default: undefined

< bindings

rating: number (Optional)
The actual star rating value
Default: undefined

showHalfStars: boolean (Optional) To show half stars or not
Options: true, flase
Default: false

numOfStars: number (Optional)
The possible number of stars to choose from
Default: 5

text: string (Optional)
The text next to the stars.
Default: undefined

labelPosition: starRatingPosition (Optional)
The position of the label
Options: top, right, bottom, left
Default: left

spread: boolean (Optional)
If the start use the whole space or not.
Default: false

size: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: middle

color: starRatingColors (Optional)
Possible color names for the stars.
Options: default, negative, middle, positive
Default: undefined

disabled: boolean (Optional)
The click callback is disabled, colors are transparent
Default: false

readOnly: boolean (Optional)
The click callback is disabled
Default: false

speed: starRatingSpeed (Optional)
The duration of the animation in ms.
Options: immediately, noticeable, slow
Default: noticeable

starType: starRatingStarTypes (Optional)
The type of start resource to use.
Options: svg, icon, image
Default: svg

& bindings

onClick: Function (Optional)
Callback function for star click event Params: rating html <star-rating-comp on-click="ctrl.onClick(rating)"></star-rating-comp>

onUpdate: Function (Optional)
Callback function for rating update event Params: rating html <star-rating-comp on-update="ctrl.onUpdate(rating)"></star-rating-comp>

getColor: Function (Optional)
Calculation of the color by rating.
Params: rating, number,numOfStars and staticColor
Return: color name

getHalfStarClass: Function (Optional)
Calculation for adding the "half" class or not, depending on the rating value.
Params: rating
Return: boolean

comments powered by Disqus
This page was last updated almost 2 years ago.