# neutron-star-rating

> Built on angular 5, star rating library. Can be used for your angular applications.

Latest version **0.1.0** (published 2018-03-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-03-28 |
| First published | 2017-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 66.1 KB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | puneeth8994 |
| Keywords | AngularJs 5, Star rating, Module, angular 5 star rating library, ng, ng-star-rating, angular-star-rating, angular, angular-4, ng-rating, star-rating-library |

## Links

- npm: https://www.npmjs.com/package/neutron-star-rating
- Repository: https://github.com/puneeth8994/ng2-neutron-rating
- Homepage: https://github.com/puneeth8994/ng2-neutron-rating#readme
- Issues: https://github.com/puneeth8994/ng2-neutron-rating/issues
- npm.io page: https://npm.io/package/neutron-star-rating

## Dependencies (13)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.14
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.7.0
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.0.0

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2018-03-28
- 0.0.9 — 2018-01-27
- 0.0.8 — 2018-01-27
- 0.0.7 — 2017-12-28
- 0.0.6 — 2017-12-28
- 0.0.5 — 2017-12-26
- 0.0.4 — 2017-12-26
- 0.0.3 — 2017-12-25
- 0.0.2 — 2017-12-25
- 0.0.1 — 2017-12-25
- 0.0.0 — 2017-12-25

## README

# NeutronStarRating

Built on angular 5, star rating library. Can be used for your angular applications.

## How to Use

**Step 1** - Import in your app module

```js
import { NeutronRatingModule } from 'neutron-star-rating';

@NgModule({
  declarations: [
    
  ],
  imports: [
    NeutronRatingModule
  ],
  providers: [
  ],
  bootstrap: []
})
export class AppModule { }
```

**Step 2** - Include it in your component

```js
import { NeutronRatingModule } from 'neutron-star-rating';

@Component({
  selector: 'your-selector',
  templateUrl: 'your template',
  styleUrls: ['./your css'],
  providers: [yourProviders]
})
```

**Step 3** - Start using it in your HTML

```html
<neutron-rating [rating]='4' [starColour]="'#FDD835'" [starSize]="4"></neutron-rating>
```


## Additional Functions

## 1) Passing the new rating to your component

**Step 1** - Add an additional attribute to detect the rating clicked in your html.

```html
<neutron-rating [rating]='4' [starColour]="'#FDD835'" [starSize]="4" (ratingClicked)='onRatingClicked($event)'></neutron-rating>
```

**Step 2** - Create a function such as onRatingClicked and retrieve the rating from there

```js
public onRatingClicked = (ratingNumICanUseInMyComponent) => {

  console.log("my new rating that I can use in my component is ");
  console.log(ratingNumICanUseInMyComponent);
}
```

## 2)Change the number of stars

**Step 1** - Add an additional attribute (starNum) to change the number of stars

```diff
- Warning - If your rating exceeds the number of stars, your rating would be equal to the number of stars
```

```html
<neutron-rating [rating]='4' [starColour]="'#FDD835'" [starSize]="4" (ratingClicked)='onRatingClicked($event)' [starNum]="10"></neutron-rating>
```

## 2)Make the stars only readable

**Step 1** - Add an additional attribute (readOnly) to make the stars only readable after initializing it with a value

```diff
- Wearning - You won't be able to change the rating once the readOnly attribute is set to true
```

```html
<neutron-rating [rating]='4' [starColour]="'#FDD835'" [readOnly]="true" [starSize]="4" (ratingClicked)='onRatingClicked($event)' [starNum]="10"></neutron-rating>
```

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