angular bootstrap ngb rating value divide in markup

Question

I have this ngb rating control:

<ngb-rating [(rate)]="x.popularity" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="true"></ngb-rating>

I want to split the x.popularity / 10 for the rate value in order to accommodate to the default 10 stars in ngb rating but I'm not able to do that. I can't modify the model so I'm looking for options how I can divide the value by 10 in order to set the correct value in the control.

Answer 1

Banana in a box syntax [()] is syntactic sugar. So [(rate)]="x.popularity" is short for [rate]="x.popularity" (rateChange)="x.popularity=$event".

So in your case something like this should work:

<ngb-rating [rate]="x.popularity*10" (rateChange)="x.popularity=$event/10" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="true">