Overview

Inputs

Input	Type	Default	Description
rate	number	0	Initial value of displayed rating.
max	number	5	Max rating value - number of stars
displayMode	boolean	false	Switch to display mode. It also enables displaying fractional values.

Outputs

Output	Type	Description
rateChange	EventEmitter of number	Emits rating value when it changes.
hoover	EventEmitter of number	Emits rating value hoovered by user.

Example

HTML:

    <button (click)="toggle()"> selection mode</button>
    <br/><br/>
    Your rating: <input [(ngModel)]="rating" name="input" type="number" *ngIf="ratingDisabled">
    <span *ngIf="!ratingDisabled"></span>
    <br/><br/>

    <div style="font-size: 20px">
        <a2-rating [displayMode]="ratingDisabled" [rate]="rating" [max]="5" (rateChange)="ratingChange($event)"
                   (hoover)="ratingHoover($event)"></a2-rating>
        <br/>
    </div>
    <span *ngIf="!ratingDisabled">Hoovered value </span>

TypeScript:

@Component({
    selector: "a2uie-rating",
    templateUrl: "src/examples/bootstrap/rating/rating.example.component.html"
})
export class RatingExampleComponent {

    rating: number = 2.4;
    hooverRating: number;
    ratingDisabled: boolean = true;

    ratingChange(newRating: number): void {
        this.rating = newRating;
    }

    ratingHoover(rating: number): void {
        this.hooverRating = rating;
    }

    toggle(): void {
        this.ratingDisabled = !this.ratingDisabled
    }
}