Guajiritos Rating

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

Installation

Use npm

npm i @guajiritos/rating --save

Use yarn

yarn add @guajiritos/rating

Guajiritos Rating requires Angular Material.

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 library GuajiritosRating where you will use it and use the component

import { GuajiritosRating } from 'guachos-rating';

@NgModule({
  imports: [
    GuajiritosRating,
  ]
})

In your component:

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

In .ts file

export class ExampleComponent {
  rating = 4.5;
}

More configuration

The GuajiritosRating library has a setting to change icon size, Angular Material Theme Palette, 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 GuajiritosRatingConfig {
  stars: number;
  color?: ThemePalette;
  size?: string;
  label?: string;
  readOnly?: boolean;
  showNumber?: boolean;
  showClearBtn?: boolean;
}

More examples

export class AppComponent {
  public rating: number = 3.5;
  public ratingForm: UntypedFormControl = new UntypedFormControl({value: 2.5, disabled: false}, [Validators.required]);

  config1: GuajiritosRatingConfig = {
    size: "22px",
    readOnly: true,
    color: 'primary',
    stars: 20,
  };

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

<guajiritos-rating [config]="this.config1" [(ngModel)]="rating"></guajiritos-rating>

<guajiritos-rating [config]="this.config2" [formControl]="ratingForm"></guajiritos-rating>