Angular Library that uses material design icons for editing and showing rating variables. This library was generated with Angular CLI version 16.0.0.
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.
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;
}
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;
}
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>