| 
| 
| 
| 
|
## Features
Fully featured this component is provided with:
- [x] easy **configurable** and reasonable defaults
- [x] all **12 css modifiers** of the awesome [css only star rating](https://github.com/BioPhoton/css-star-rating) library
- [x] it integrates well with **reactive forms** and all it's states
- [x] focus and blur events are handled for a **smooth keyboard navigation**
- [x] it's **keyboard control** is even better than a native input once :-)
- [x] mouse enter and leave events are used to generate a nice **on hover interaction**
- [x] importable as a **angular ngModule** it is a plug and play to use
## Related Projects
| Css | Angular 1 | Angular | Ionic 1 |
|--- |--- |--- |--- |
| 
| 
| 
| 
|
| [Css Star Rating](https://github.com/BioPhoton/css-star-rating) | [Angular1 Star Rating](https://github.com/BioPhoton/angular1-star-rating) | [Angular Star Rating](https://github.com/BioPhoton/angular-star-rating) |[Ionic1 Star Rating](https://github.com/BioPhoton/ionic1-star-rating) |
## DEMO
- [x] [Example-App](https://github.com/BioPhoton/angular-star-rating/tree/master/examples/angular2)
## Installation
**Get Angular Star Rating:**
- clone & build this repository
- [download as .zip](https://github.com/BioPhoton/angular-star-rating/releases)
- via **[npm](https://www.npmjs.org/)**: by running `$ npm install angular-star-rating --save` from your console
## Consuming the library
As a precondition we consider you have your ```.angular-cli.json``` setup with an assets folder so that the ```./src/assets``` folder is included in the bundled version.
But this is given by default if you use the angular-cli to setup your project.
Now you can import your library in your angular application by running:
```bash
$ npm install angular-star-rating --save
```
or
```bash
$ npm install angular-star-rating@2.0.0-rc.5 --save
```
for a specific version.
Create an ```assets``` folder under your ```./src``` folder and copy the images from your ```./node_modules/assets/images``` folder into ```./src/assets/images```.
In your ```app.module.ts``` import the ```StarRatingModule``` to your Angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// IMPORT YOUR LIBRARY
import { StarRatingModule } from 'angular-star-rating';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// SPECIFY YOUR LIBRARY AS AN IMPORT
StarRatingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Once your library is imported, you can use the components in your Angular application:
```html
onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}
onClickResult: {{onClickResult | json}}
onRatingChangeResult: {{onRatingChangeResult | json}}
` }) export class MyEventsComponent { onClickResult:IStarRatingOnClickEvent; onHoverRatingChangeResult:IStarRatingIOnHoverRatingChangeEvent; onRatingChangeResult:IStarRatingOnRatingChangeEven; onClick = ($event:IStarRatingOnClickEvent) => { console.log('onClick $event: ', $event); this.onClickResult = $event; }; onRatingChange = ($event:IStarRatingOnRatingChangeEven) => { console.log('onRatingUpdated $event: ', $event); this.onRatingChangeResult = $event; }; onHoverRatingChange = ($event:IStarRatingIOnHoverRatingChangeEvent) => { console.log('onHoverRatingChange $event: ', $event); this.onHoverRatingChangeResult = $event; }; } ``` ```html
**labelText**: string (Optional)
The text next to the stars.
Default: undefined
```html
**labelPosition**: starRatingPosition (Optional)
The position of the label
Options: top, right, bottom, left
Default: left
```html
#### Style Modifier
**starType**: starRatingStarTypes (Optional)
The type of start resource to use.
Options: svg, icon
Default: svg
```html
**size**: starRatingSizes (Optional)
The height and width of the stars.
Options: small, medium, large
Default: medium
```html
**space**: starRatingStarSpace (Optional)
If the start use the whole space or not.
Options: no, between, around
Default: no
```html
**speed**: starRatingSpeed (Optional)
The duration of the animation in ms.
Options: immediately, noticeable, slow
Default: noticeable
```html
**direction**: string (Optional)
The direction of the stars and label.
Options: rtl, ltr
Default: rtl
```html
**disabled**: boolean (Optional)
The click callback is disabled, colors are transparent
Default: false
```html
#### Control modifier
**rating**: number (Optional)
The actual star rating value
Default: no
```html
**step**: number (Optional)
The step interval of the control
Default: 1
```html
**showHalfStars**: boolean (Optional)
To show half stars or not
Options: true, false
Default: false
```html
**readOnly**: boolean (Optional)
The click callback is disabled
Default: false
```html
**id**: string (Optional)
The html id attribute of the star rating
Default: undefined
```html
**getHalfStarVisible**: Function (Optional)
Calculation for adding the "half" class or not, depending on the rating value.
Params: rating
Return: boolean
```html
### Outputs
**onClick**: Function (Optional)
Callback function for star click event
Params: $event
```html
**onRatingChange**: Function (Optional)
Callback function for rating change event
Params: $event
```html
**hoverEnabled**: boolean (Optional)
An or disable hover interaction.
Default: false
Potions: true, false
```html