<rating [(ngModel)]="rate" [max]="5" style="color:var(--tb-warning);font-size: 25px;"></rating >
                                                

rate = 3;

<rating [(ngModel)]="rate" [max]="5" style="color:var(--tb-warning);font-size: 25px;"></rating>
                                                

 rate = 3;

 <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; 

 <rating [(ngModel)]="readrate" [max]="16" [readonly]="true"
style="color:var(--tb-warning);font-size: 25px;"></rating>

readrate = 4.5;

<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;
                                                

<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;
    }