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 --saveUse yarn
yarn add @guajiritos/ratingGuajiritos Rating requires Angular Material.
ng add @angular/materialImporting 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>