# simple-rating-star

> A simple library to display rating star for angular

Latest version **0.0.5** (published 2018-10-24) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install simple-rating-star
pnpm add simple-rating-star
yarn add simple-rating-star
bun add simple-rating-star
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-10-24 |
| First published | 2018-10-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 154.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Santosh Sagar |
| Maintainers | msg2santoshsagar |
| Keywords | angular-rating, rating-bar, simple angular rating, angualr rating 4 |

## Links

- npm: https://www.npmjs.com/package/simple-rating-star
- npm.io page: https://npm.io/package/simple-rating-star

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.5 (latest) — 2018-10-24
- 0.0.4 — 2018-10-24
- 0.0.3 — 2018-10-24
- 0.0.2 — 2018-10-24
- 0.0.1 — 2018-10-19

## README

# Alife Simple Rating Star

Angular 4 simple rating star that works with `Google Material Icons`

## Install simple-rating-star from NPM :

Run `npm install simple-rating-star --save`

## Add Dependecy to your project

- Add Google Material Icons to index .html

```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```
-  Import `SimpleRatingStarModule` to your project and include module in imports section

```javascript
import { SimpleRatingStarModule } from 'simple-rating-star';

@NgModule({
  declarations: [
  ],
  imports: [
    SimpleRatingStarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
```

## Syntax
```html
<alife-simple-rating-star [options]="options" (onRatingChanged)="OnRatingChanged($event)" [rating]="3" ></alife-simple-rating-star>
```

## Options

options Definition : 

```javascript
options = {
       maxRating?: number = 5;
       readOnly?: boolean = false;
       resetAllowed?: boolean = true;
 }
```
 - maxRating      : The number of star
 - readOnly       : To decide if user can change the value or not
 - resetAllowed   : To allow user to reset the rating

## Events

 - onRatingChanged : Will get called when user will change the rating. It will contain previous rating and new rating.

## Passing the initial rating

    There is may ways to set rating. You can set as given below :
    
    [rating]="3"            : Constant value
    [rating]="ratingData"   : To set the value from component
    rating="3"              : Constant
    [(rating)]="ratingData" : Two way binding

## Examples

- Displaying rating using loop with two way binding

```html
<alife-simple-rating-star [options]="options" (onRatingChanged)="OnRatingChanged($event)" [(rating)]="modelRating[index]"
    *ngFor="let r of modelRating;let index = index"></alife-simple-rating-star>
```
-  Displaying rating using value

```html
<alife-simple-rating-star [options]="options" (onRatingChanged)="OnRatingChanged($event)" [rating]="modelRating" ></alife-simple-rating-star>
```

## Author

Santosh Sagar

## License

This module is released under the permissive [MIT license](https://github.com/msg2santoshsagar/alife-simple-rating-star/blob/master/LICENSE)

---
_Source: https://npm.io/package/simple-rating-star · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._