ngx-input-star-rating

A small star rating component compatible with both Angular Reactive Forms and Template Forms.

Demo

Installation

To install this library, run:

npm install ngx-input-star-rating --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgxInputStarRatingModule } from 'ngx-input-star-rating';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    NgxInputStarRatingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

Once the library is imported, you can use the ngx-input-star-rating component.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
 
@Component({
  selector: 'app-root',
  template: `
<h1>ngx-input-star-rating</h1>
 
<form [formGroup]="form" (ngSubmit)="submit()">
  <ngx-input-star-rating formControlName="rating"></ngx-input-star-rating>
  <button>Submit</button>
</form>
  `
})
export class AppComponent implements OnInit {
  form: FormGroup;
  value: Observable<number>;
 
  constructor(private formBuilder: FormBuilder) { }
 
  ngOnInit() {
    this.form = this.formBuilder.group({
      rating: [3]
    });
 
    this.value = this.form.controls.rating.valueChanges;
  }
 
  submit() {
    console.log(this.form.value);
  }
}

License

MIT © Cory Rylan