# ionic2-rating

> An Angular2 component to visualize a star rating bar, built for Ionic 2.

Latest version **1.2.2** (published 2017-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ionic2-rating
pnpm add ionic2-rating
yarn add ionic2-rating
bun add ionic2-rating
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2017-04-27 |
| First published | 2016-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 176 |
| Author | andrucz |
| Maintainers | andrucz |
| Keywords | ionic2, angular2 |

## Links

- npm: https://www.npmjs.com/package/ionic2-rating
- Repository: https://github.com/andrucz/ionic2-rating
- Issues: https://github.com/andrucz/ionic2-rating/issues
- npm.io page: https://npm.io/package/ionic2-rating

## Recent versions

- 1.2.2 (latest) — 2017-04-27
- 1.2.1 — 2017-04-27
- 1.2.0 — 2017-02-21
- 1.1.0 — 2017-02-16
- 1.0.0 — 2017-02-09
- 0.0.12 — 2017-01-03
- 0.0.11 — 2017-01-03
- 0.0.10 — 2016-10-13
- 0.0.9 — 2016-10-13
- 0.0.8 — 2016-09-30
- 0.0.7 — 2016-09-29
- 0.0.6 — 2016-09-28
- 0.0.5 — 2016-09-28
- 0.0.4 — 2016-09-28
- 0.0.3 — 2016-09-28
- … 2 more at https://npm.io/package/ionic2-rating/versions

## README

ionic2-rating
=============

An Angular2 component to visualize a star rating bar, built for Ionic 2.

![Preview][preview-image]

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url]

[![NPM][nodei-image]][nodei-url]

## How to install:

```
$ npm install --save ionic2-rating
```

## How to use:

```typescript
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// Import ionic2-rating module
import { Ionic2RatingModule } from 'ionic2-rating';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    Ionic2RatingModule // Put ionic2-rating module here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}
```



```HTML
<rating [(ngModel)]="rate" 
        readOnly="false" // default value, so it can be ommited
        max="5" // default value
        emptyStarIconName="star-outline" // default value
        halfStarIconName="star-half" // default value
        starIconName="star" // default value
        nullable="false" // default value
        (ngModelChange)="onModelChange($event)"></rating>
```

### You may also need to customize component styles:

```CSS
ul {
  padding: 0px;

  &.rating li {
    padding: 5px 10px !important;
    background: none;
    color: #ffb400;

    ion-icon {
      font-size: 30px;
    }
  }
}
```

Based on ionic-rating for Ionic 1: https://github.com/fraserxu/ionic-rating

[preview-image]: https://github.com/andrucz/ionic2-rating/blob/master/preview.gif
[npm-url]: https://www.npmjs.com/package/ionic2-rating
[npm-image]: https://img.shields.io/npm/v/ionic2-rating.svg
[nodei-image]: https://nodei.co/npm/ionic2-rating.png?downloads=true&downloadRank=true&stars=true
[nodei-url]: https://www.npmjs.com/package/ionic2-rating
[downloads-image]: https://img.shields.io/npm/dm/ionic2-rating.svg
[downloads-url]: http://badge.fury.io/js/ionic2-rating

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