Angular1 Star Rating ⭐⭐⭐⭐⭐

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

!License
!Bower Version


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

!Angular1-Star-Rating

DEMO

- [x] Example-App
- [x] Example-App-Plnkr

Related Projects

| Css | Angular1 (>=1.5)| Angular (>=2) |
|--- |--- |--- |
| | | |
| Css Star Rating | Angular1 Star Rating | Angular Star Rating |

Features

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.

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

Browser support

| IE | Firefox | Chrome | Safari | Opera |
|--- |--- |--- |--- |---|
| > 11 | > 50 | > 55 | > 10 | > 41 |
| | | | | |

Install

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

`

Load library as minified js file
`html

`

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

Use it
`html

`

Component Properties

$3

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

`html

`

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

`html

`


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

`html

`



showHoverStars: boolean (Optional)
To show hover state on stars or not
Options: true, false
Default: false

`html

`




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

`html

`


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

`html

`


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

`html

`





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

`html

`




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

`html

`




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

`html

`





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

`html

`



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

`html

`



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

`html

`



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

`html

`




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

`html

`




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

`html

`


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

`html

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

if(absDiff == 0.1) {
return false;
}

return absDiff > 0;
}
`

$3

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

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


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

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