Socket
Socket
Sign inDemoInstall

ng-rating-bar

Package Overview
Dependencies
5
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-rating-bar

Star rating component for angular


Version published
Maintainers
1
Weekly downloads
175
decreased by-0.57%

Weekly downloads

Readme

Source

Rating

Stackblitz Demo

Install

npm i ng-rating-bar

Import

import { NgRatingBarModule } from 'ng-rating-bar';

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    NgRatingBarModule
  ]
})

Simple usage

<ng-rating-bar 
  [(value)]="value" 
  [ratingCount]="10" 
></ng-rating-bar>
Value is {{ value }}

Properties

NameTypeRequiredDefault
valuenumberRequired0
ratingCountnumberRequired5
disabledbooleanOptionalfalse
resetAblebooleanOptionalfalse
colorActivestringOptional#edb867
colorDefaultstringOptional#d2d2d2
stylesObjectOptional{ fontSize: '28px', backgroundColor: '', margin: '5px', padding: '0px' }

Events

EventParameterDescription
valueChange(value: number)Callback to invoke when value was changed
hoverChange(value: number)Triggered when on hover change

Note For angular version below 14 use version 1.0.2

npm i ng-rating-bar@1.0.2

Usage with output event

<ng-rating-bar
  [value]="value"
  (valueChange)="onValueChange($event)"
  [ratingCount]="10"
></ng-rating-bar>

In component

onValueChange($event: number) {
  this.value = $event
}

Disabled rating

  <ng-rating-bar
    [value]="5"
    [ratingCount]="7"
    [disabled]="true"
  ></ng-rating-bar>

Using in reactive form

In html view

<form [formGroup]="myForm">
      <ng-rating-bar
        [control]="myForm.get('rating')"
        [ratingCount]="ratingCount"
      ></ng-rating-bar>
      
      <p *ngIf="myForm.get('rating').touched && myForm.get('rating').hasError('required')">
        Field is required
      </p>

  <p>
    <button (click)="submitForm()">Submit</button>
  </p>
  </form>

In Component

  ngOnInit() {
    this.myForm = this.fb.group({
      rating: [null, Validators.required]
    });
  }

  submitForm() {
    this.myForm.get('rating').markAllAsTouched();
    console.log(this.myForm.value);
  }

Same example for angular ^14

<form [formGroup]="myForm">
  <ng-rating-bar
    [control]="control"
    [ratingCount]="ratingCount"
  ></ng-rating-bar>

  <p *ngIf="myForm.get('rating').touched && myForm.get('rating').hasError('required')">
    Field is required
  </p>

  <p>
  <button (click)="submitForm()">Submit</button>
  </p>
</form>

In component define getter for current formControl

  get control() {
    return this.myForm.get('rating') as FormControl;
  }

Hover output

  Value is:
  <b
    [class.excellent]="hoverValue === 7"
    [class.good]="hoverValue > 4 && hoverValue < 7"
    [class.notBad]="hoverValue > 2 && hoverValue <= 4 "
    [class.bad]="hoverValue <= 2"
  >
    {{ hoverValue }}
  </b>
  <p>

    <ng-rating-bar
      [(value)]="value2"
      (hoverChange)="hoverValue = $event"
      [ratingCount]="7"
    ></ng-rating-bar>
  </p>

Set custom color

<ng-rating-bar
  [(value)]="value" 
  [ratingCount]="ratingCount" 
  colorActive="red" 
  colorDefault="gray"
></ng-rating-bar>

Custom styles

<ng-rating-bar
  value="5"
  [ratingCount]="10"
  [styles]="{backgroundColor: '#0965ee', margin: '10px', fontSize: '32px', padding: '2px'}"
></ng-rating-bar>

New from version ^1.2.0

Using html symbols

Example of html symbols https://www.w3schools.com/charsets/ref_utf_symbols.asp

<ng-rating-bar
  value="5"
  [ratingCount]="10"
  [symbol]="'&#9728;'"
  [resetAble]="true"
></ng-rating-bar>

Using font awesome icons

If you have installed font awesome into your project you can pass icon as @Input() In component

export class AppComponent implements OnInit {

  faIcon = '<i class="fa fa-car"></i>';
  constructor() {}
  ....
}

In html

<ng-rating-bar
  value="5"
  [ratingCount]="10"
  [symbol]="faIcon"
></ng-rating-bar>

Keywords

FAQs

Last updated on 29 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc