Overview Official Website

Angular Bootstrap Rating is the best star rater for the browser. No dependencies. Unlimited number of stars.

Add Package
ng add ngx-bootstrap --component rating
Import
import { RatingModule } from 'ngx-bootstrap/rating'; in your module.ts file
Examples:
Title Template
Basic Rater 
<rating [(ngModel)]="rate" [max]="5" style="color:var(--tb-warning);font-size: 25px;"></rating >
rate = 3;
Rater with Step 
<rating [(ngModel)]="rate" [max]="5" style="color:var(--tb-warning);font-size: 25px;"></rating>
rate = 3;
Custom Messages 
 <rating [max]="10" [(ngModel)]="x" [customTemplate]="t"
    style="color: #0275d8;font-size: 20px;"></rating>
<div class="card">
    <pre class="card-block card-header"
        style="margin:15px 0;"><b>(<i>Rate:</i> {{x}})</b></pre>
</div>
<ng-template #t let-index="index" let-value="value">{{index < value
        ? '&#9745;' : '&#9744;' }}</ng-template>
x = 5;
Example with unlimited number of stars. readOnly option is set to true 
 <rating [(ngModel)]="readrate" [max]="16" [readonly]="true"
style="color:var(--tb-warning);font-size: 25px;"></rating>
readrate = 4.5;
On Hover Event 
<rating [(ngModel)]="hoverrate" [max]="hovermax" style="color:var(--tb-warning);font-size: 25px;"
(onHover)="hoveringOver($event)"></rating><span class="ratingnum badge bg-info align-middle ms-2">{{overStar || "none"}}</span>
hovermax = 5; 
hoverrate = 1;  
overStar: number | undefined = this.hoverrate;
Clear/Reset Rater 
<rating [(ngModel)]="resetrate" [max]="5" style="color:var(--tb-warning);font-size: 25px;"></rating>
<button id="raterreset-button" class="btn btn-light btn-sm ms-2" (click)="resetStar()">Reset</button>
resetrate = 2;
resetStar(): void {
    this.resetrate = 0;
}
© Skote.