@software-scientists/ngx-star-rating

ngx-star-rating

Angular Star Rating (ngx star rating)

Simple Angular rating control from angular2 application using fontawesome icon.

Demo can be found here

Installation

1. Install npm module:

   npm install ngx-star-rating --save

2. Include fontawesome css:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Usage

Import NgxStarRatingModule module in your app, and use a component in your html:

  import { NgxStarRatingModule } from 'ngx-star-rating';
  
  // Include tag into your component
  <ngx-star-rating [formControl]="rating" [id]="'rating'" [disabled]="true"></ngx-star-rating>
 
 

• <ngx-star-rating>:

  • `[(ngModel)] | formControl = ngModel or formControl

  • '[id] = Unique id for each control

  • [disabled]="true|false" = Enable/Disable star rating. Default is false.

Sample

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxStarRatingModule } from 'ngx-star-rating';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxStarRatingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  public form: FormGroup;

  constructor(private fb: FormBuilder){
    this.rating3 = 0;
    this.form = this.fb.group({
      rating: ['', Validators.required],
    })
  }
}

// app.component.html
<form [formGroup]="form">
    <ngx-star-rating formControlName="rating" [id]="'rating'"></ngx-star-rating>
    <div>Rating: {{form.value.rating}}</div>
    <p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
</form>