I am using ng-rating to display avg value of score. The problem is when average value is like 3.97. Ng-rating still displays it as 3 stars. How can I make it to display like half of a star? my html:
<div style="font-size: x-large; color: orange;"><ngb-rating [max]="5" [(rate)]="overallScore" [readonly]="false"></ngb-rating></div>
Example for 3.67 value: star
Edit: While trying solution from bootstrap site 4 hearts filling of heart is a bit square?
Edit2:
Template:
<ng-template #t let-fill="fill">
<span class="star" [class.full]="fill === 100">
<span class="half" [style.width.%]="fill">⭐</span>⭐
</span>
</ng-template>
I have changed code to css
.star {
position: relative;
display: inline-block;
font-size: 3rem;
color: #d3d3d3;
}
.star.full {
color: #ffa600;
}
.star.half {
position: absolute;
display: inline-block;
overflow: hidden;
color: #ffa600;
}
and it gives that result: stars
For the custom template with decimals you can use following:
<ng-template #scoreTemplate let-fill="fill">
<span class="star" [class.full]="fill === 100">
<span class="half" [style.width.%]="fill">⭐</span>⭐
</span>
</ng-template>
<ngb-rating max="5"
[(rate)]="overallScore"
[readonly]="true"
[starTemplate]="scoreTemplate">
</ngb-rating>
but you also need the styles:
.star {
position: relative;
display: inline-block;
font-size: 3rem;
color: #d3d3d3;
&.full {
color: #ffa600;
}
&.half {
position: absolute;
display: inline-block;
overflow: hidden;
color: #ffa600;
}
}
For just half a star and not all decimals you can use:
<ng-template #scoreTemplate let-fill="fill">
<span class="star" [class.full]="fill < 50">
<span class="half" [style.width.%]="fill >= 50 ? 50 : 0">⭐</span>⭐
</span>
</ng-template>
Also, you can replace the emoji with your custom icon.