Ngb rating max value dyamic change is not reflected in stars length

user_11044899 0
Viewed 336

In ngb rating the max value dynamic change is not reflecting on the stars length. Two-way binding is happening in [max]="". But the stars length is not changing.

<ngb-rating [(rate)]="currentRate" [max]="maxValue"></ngb-rating>
<hr>
<pre>Rate: <b>{{currentRate}}</b></pre>

<button class="btn" (click)="addValue()">Add</button>
<span>{{maxValue}}</span>

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-rating-basic',
  templateUrl: './rating-basic.html'
})
export class NgbdRatingBasic {
  currentRate = 8;
  maxValue = 5;

  addValue() {
    this.maxValue++;
  }
}

Output screenshot

ng-bootstrap angular
1 Answers

Looking into the rating source code, we clearly see that the stars count is calculated only on ngOnInit. As a workaround, I can only imagine forcing the rating to rerender using *ngIf:

<ngb-rating *ngIf='showRating' [(rate)]="currentRate" [max]="maxValue"></ngb-rating>
<hr>
<pre>Rate: <b>{{currentRate}}</b></pre>

<button class="btn" (click)="addValue()">Add</button>
<span>{{maxValue}}</span>

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-rating-basic',
  templateUrl: './rating-basic.html'
})
export class NgbdRatingBasic {
  currentRate = 8;
  maxValue = 5;
  showRating=true;

  addValue() {
    this.maxValue++;
    this.showRating=false;
    // timeout to wait for rating component to be hidden
    setTimeout(()=>{this.showRating=true}, 10);
  }
}
user_3901610
Related