GuachosRating

Angular Library that uses material design icons for editing and showing rating variables. This library was generated with Angular CLI version 13.0.0.

Installation

npm i guachos-rating --save

GuachosRating requires Angular Material. For angular version 8 or higher projects

ng add @angular/material

Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

Usages

You must import the module GuachosRatingModule where you will use it and use the component

***
import { GuachosRatingModule } from 'guachos-rating';
@NgModule({
  ***
  imports: [
    GuachosRatingModule,
  ],
****
})

In your component:

<guachos-rating [value]="rating"> </guachos-rating>

In .ts file

export class ExampleComponent {
  rating = 4.5;
}

More configuration

The GuachosRatingComponent component has a setting to change icon size, fill color, mode (read-only), maximum number of icons, presentation tags, and an option to put a clear button online. The interface look like this:

export interface StarConfig {
  size?: string;
  colorFill?: string;
  label?: string;
  readOnly?: boolean;
  showNumber?: boolean;
  showClearBtn?: boolean;
  stars?: number;
}

More examples

export class AppComponent {
  title = "guachos-rating-test";
  rating = 3.5;
  ratingForm = new FormControl(2.5, [Validators.required]);

  config1: StarConfig = {
    size: "22px",
    readOnly: true,
    colorFill: "#fa4508",
    stars: 20,
  };

  config2: StarConfig = {
    size: "36px",
    readOnly: false,
    showClearBtn: true,
    showNumber: true,
  };
}

<guachos-rating [config]="this.config1" [(ngModel)]="rating">
</guachos-rating>
<guachos-rating [config]="this.config2" [formControl]="ratingForm">
</guachos-rating>