ngx-star-rating
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    ngx-star-rating

    Angular Star Rating (ngx star rating)

    Simple Angular rating control from angular2 application using fontawesome icon.

    Demo can be found here

    ngx-star-rating angular rating

    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>

    Install

    npm i ngx-star-rating

    DownloadsWeekly Downloads

    1,081

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    64.4 kB

    Total Files

    17

    Last publish

    Collaborators

    • jitendradp