Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@software-scientists/ngx-star-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Install npm module:

npm install ngx-star-rating --save
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>