Ionic1 Star Rating

Ionic1 Star Rating

Fully featured Star-Rating component implementing gestures using svg icons


Bio Photon

Bio Photon

Member since 2015


iOS, Android  
4 years ago
4 years ago

Ionic1 Star Rating ⭐⭐⭐⭐⭐

⭐ Ionic 1 Component written in typescript, based on css only techniques. ⭐

LicenseBower VersionNPM Version
Github Repo

Ionic1 Star Rating is a Ionic specific Angular1.6 component written in typescript.
It is based on css-star-rating, a fully featured and customizable css only star rating component written in scss.


##Related Projects

CssAngular 1AngularIonic 1
[Css Star Rating]([Angular1 Star Rating]([Angular Star Rating]([Ionic1 Star Rating](


Beside all other features listed below it is optimized for mobile which means it implements touch gestures over ionics built in gestures. This module implements all Features from CSS-STAR-RATING. It also provides callbacks for all calculation functions used in the component as well as all possible event emitters.

  • gestures - Implements touch gestures i. e. drag to rate
  • id - The html id attribute of the star rating
  • rating - The actual Star rating
  • showHalfStars - To display half stars or not
  • numOfStars - The max number of stars you can rate
  • size - The different sizes of the component
  • space - The space between stars
  • staticColor - A static color for the stars
  • disabled - Component is in disabled mode
  • starType - Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons
  • labelText - The value of the label text
  • labelVisible - If the label is visible or not
  • labelPosition - The position of the label
  • speed - The duration of the animation
  • direction - The direction of the component i.e. right to left
  • readOnly - Click event is disabled
  • getColor - Custom function to calculate the color for a rating
  • getHalfStarVisible - Custom function to calculate value for displaying half stars or not
  • onClick - Event emitter for onClick action
  • onRatingChange - Event emitter for onRatingChange event
  • onHover - Event emitter for touch/drag gestures

Browser support

> 11> 50> 55> 10> 41


*Get Ionic1 Star Rating:

  • clone & build this repository
  • download as .zip
  • via npm: by running $ npm install ionic1-star-rating from your console
  • via bower: by running $ bower install ionic1-star-rating from your console
  • via cdn: by adding the git-cdn reference in your index.html ```html


Load library as minified js file



*Load library as ts module

typescript import angularStars = require('ionic1-star-rating/dist/index.js');

Inject it into angular

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

Use it

html <star-rating-comp rating="'3.0'"></star-rating-comp>

Component Properties

Input (< bindings)

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

html <star-rating-comp id="'my-id'"></star-rating-comp>

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

html <star-rating-comp rating="3"></star-rating-comp>

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

html <star-rating-comp show-half-stars="true"></star-rating-comp>

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

html <star-rating-comp num-of-stars="6"></star-rating-comp>

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

html <star-rating-comp label-text="'My text!'"></star-rating-comp>

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

html <star-rating-comp label-position="'top'"></star-rating-comp>

space: starRatingStarSpace (Optional)
If the start use the whole space or not. Options: no, between, around Default: no

html <star-rating-comp space="'around'"></star-rating-comp>

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

html <star-rating-comp size="'small'"></star-rating-comp>

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

html <star-rating-comp color="'positive'"></star-rating-comp>

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

html <star-rating-comp disabled="true"></star-rating-comp>

direction: string (Optional)
The direction of the stars and label.
Options: rtl, ltr
Default: rtl

html <star-rating-comp direction="'ltr'"></star-rating-comp>

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

html <star-rating-comp read-only="true"></star-rating-comp>

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

html <star-rating-comp speed="'slow'"></star-rating-comp>

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

html <star-rating-comp star-type="'icon'"></star-rating-comp>

getColor: Function (Optional)
Calculation of the color by rating.
Params: rating, numOfStars, staticColor
Return: colorName as string

html <star-rating-comp get-color="parentCtrl.getColor(rating, numOfStars, staticColor)"></star-rating-comp>

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

html <star-rating-comp get-half-star-visible="parentCtrl.getHalfStarVisible(rating)" rating="3.1"></star-rating-comp>

```javascript function getHalfStarVisible(rating) { var absDiff = Math.abs(rating % 1);

if(absDiff == 0.1) {
    return false;

return absDiff > 0;

} ```

### Output (& bindings)

onClick: Function (Optional)
Callback function for star click event Params: $event

html <star-rating-comp on-click="parentCtrl.onClick($event)"></star-rating-comp>

javascript function onClick($event) { parent.clickCount = parent.clickCount + 1; }

onRatingChange: Function (Optional)
Callback function for rating update event Params: $event

html <star-rating-comp on-rating-change="parentCtrl.onRatingChange($event)"></star-rating-comp>

javascript function onRatingChange($event) { parent.rating = $event.rating; }