Overview
The Rating component provides an intuitive star-based interface for users to submit ratings. It supports customizable icons, optional cancel functionality, and read-only mode.
Component Selector
Basic Usage
import { Component } from '@angular/core';
import { MagaryRating } from 'ng-magary';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-demo',
standalone: true,
imports: [MagaryRating, FormsModule],
template: `
<magary-rating [(ngModel)]="rating" />
`
})
export class DemoComponent {
rating: number | null = null;
}
Custom Number of Stars
<magary-rating
[(ngModel)]="rating"
[stars]="10"
/>
<magary-rating
[(ngModel)]="rating"
[cancel]="false"
/>
Read-Only Mode
<magary-rating
[(ngModel)]="rating"
[readonly]="true"
/>
Custom Icons
<magary-rating
[(ngModel)]="rating"
[iconOn]="'heart'"
[iconOff]="'heart'"
[iconCancel]="'x'"
/>
Properties
The current rating value (1 to number of stars). Supports two-way binding with [(value)]
Number of star icons to display
When true, shows a cancel button to clear the rating
When true, prevents user interaction with the rating component
When true, displays the rating but prevents modification
Lucide icon name for filled/selected stars
Lucide icon name for empty/unselected stars
Lucide icon name for the cancel button
Events
onRate
output<{ originalEvent: Event; value: number }>
Emitted when a star is clicked to set a rating. Returns the rating value (1 to stars)
Emitted when the cancel button is clicked to clear the rating
The Rating component implements ControlValueAccessor and integrates with Angular forms.
import { FormControl, ReactiveFormsModule } from '@angular/forms';
productRating = new FormControl<number | null>(null);
<magary-rating [formControl]="productRating" />
<magary-rating
[(ngModel)]="rating"
name="userRating"
/>
Accessibility Features
- Keyboard navigation support
- ARIA labels and roles
- Focus management
- Screen reader support
- Disabled and readonly state handling
Styling
The Rating component uses the following CSS classes:
.magary-rating: Main container.magary-rating-item: Individual star wrapper.magary-rating-icon: Star icon element.magary-rating-cancel: Cancel button.magary-disabled: Applied when disabled.magary-readonly: Applied when readonly
Complete Example
import { Component } from '@angular/core';
import { MagaryRating } from 'ng-magary';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-rating-demo',
standalone: true,
imports: [MagaryRating, ReactiveFormsModule, CommonModule],
template: `
<div class="demo-container">
<h3>Product Rating</h3>
<magary-rating
[formControl]="productRating"
(onRate)="onProductRate($event)"
/>
<p *ngIf="productRating.value">
You rated: {{ productRating.value }} stars
</p>
<h3>Service Rating (10 stars)</h3>
<magary-rating
[formControl]="serviceRating"
[stars]="10"
/>
<h3>Average Rating (Read-only)</h3>
<magary-rating
[formControl]="averageRating"
[readonly]="true"
[cancel]="false"
/>
<p>Average: {{ averageRating.value }} / 5</p>
<h3>Custom Icons</h3>
<magary-rating
[formControl]="likeRating"
[iconOn]="'heart'"
[iconOff]="'heart'"
[iconCancel]="'x'"
/>
<h3>Disabled State</h3>
<magary-rating
[formControl]="disabledRating"
[disabled]="true"
/>
</div>
`
})
export class RatingDemoComponent {
productRating = new FormControl<number | null>(null);
serviceRating = new FormControl<number | null>(7);
averageRating = new FormControl<number | null>(4);
likeRating = new FormControl<number | null>(null);
disabledRating = new FormControl<number | null>(3);
onProductRate(event: { value: number }) {
console.log('Product rated:', event.value);
}
}
