# ngx-ratify

> > Add a rating widget to your angular project.

Latest version **0.0.2** (published 2019-07-04) · 0 weekly downloads

## Install

```sh
npm install ngx-ratify
pnpm add ngx-ratify
yarn add ngx-ratify
bun add ngx-ratify
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-07-04 |
| First published | 2019-06-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 63.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | riyas.ali |

## Links

- npm: https://www.npmjs.com/package/ngx-ratify
- npm.io page: https://npm.io/package/ngx-ratify

## Dependencies (1)

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

## Recent versions

- 0.0.2 (latest) — 2019-07-04
- 0.0.1 — 2019-06-28

## README

# Ngx Ratify

> Add a rating widget to your angular project.

For now, one component is added in this library
```html
<ngx-ratify 
[grade]="grade" 
[maxRating]="maxRating" [showRatingCounter]="showRatingCounter" (triggerRatingSelection)="selectedRating($event)"></ngx-ratify>
```

# How to use?

* Include our ```ngx-ratify``` module in ```app.module.ts```
```javascript
import { RatifyModule } from 'ngx-ratify';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RatifyModule //<-- add the module in imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

* Add the component ```<ngx-ratify>``` where rating part is expected in your application

---

## To brief the signatures of the components as below

1. ```[grade]``` - pass the rating number to the app i.e. - If rating has to be pre-selected. **grade** - hold the default value of rating. | __type: *number*__
2. ```[maxRating]``` - pass the maximum rating stars needs to be rendered by that component. | __type: *number*__
3. ```[showRatingCounter]``` - this boolean value is to decide whether to show the rating value on the screen like 2 out of 5 | __type: *boolean*__
4. ```(triggerRatingSelection)``` - This callback will be triggered when user selects the rating in the component.

# Sample implementation

**```app.module.ts```**

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RatifyModule } from 'ngx-ratify';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RatifyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

**```app.component.html```**

```html
<div style="text-align:center">
  <h1>
    Lets rate it!
  </h1>
  <ngx-ratify [grade]="grade" [maxRating]="maxRating" [showRatingCounter]="showRatingCounter" (triggerRatingSelection)="selectedRating($event)"></ngx-ratify>
  <h1 *ngIf="myRating">
    Rated to {{myRating}}
  </h1>
</div>
```

**```app.component.ts```**

```javascript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  grade = 0;
  maxRating = 5;
  showRatingCounter = true;
  myRating: number;

  selectedRating(rate: number) {
    console.log('your rating is');
    console.log(rate);
    this.myRating = rate;
  }
}
```
# Add Font Awesome to your project?

```html
npm install font-awesome --save
```

In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below:

```html
"apps": [
          {
             "root": "src",
             "outDir": "dist",
             ....
             "styles": [
                "styles.css",
                "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],
```

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