Ngx Ratify

Add a rating widget to your angular project.

For now, one component is added in this library

<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

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

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

<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

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?

npm install font-awesome --save

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

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

],