@guajiritos/rating/README.md

Angular Library that uses material design icons for editing and showing rating variables.

# 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
```sh
npm i @guajiritos/rating --save
```

Use yarn
```sh
yarn add @guajiritos/rating
```

`Guajiritos Rating` requires [Angular Material](https://material.angular.io/guide/getting-started/).


```sh
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

```typescript

import { GuajiritosRating } from 'guachos-rating';

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

In your component:

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

In .ts file

```typescript
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:

```typescript
export interface GuajiritosRatingConfig {
  stars: number;
  color?: ThemePalette;
  size?: string;
  label?: string;
  readOnly?: boolean;
  showNumber?: boolean;
  showClearBtn?: boolean;
}
```

### More examples

```typescript
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,
  };
}
```

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

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