NG-ZORRO/ng-zorro-antd

rate-component value

imaliouris opened this issue · 0 comments

What problem does this feature solve?

It would be great if we could configure the starting value of the rate component or pass all the values that we want for each character.
i.e. lets say that we have a rate component with negative values, -3, -2, -1, 0, 1, 2, 3

with current api we can achieve only the presentation of those numbers but the values will be the following: 1, 2, 3, 4, 5, 6, 7

<nz-rate
        [nzCount]="7"
        [nzCharacter]="customCharacter"></nz-rate>

<ng-template #customCharacter let-index>
    <span>{{ index - 3 }}</span>
</ng-template>

so for example, if user selects -3 the value will be 1 etc.

What does the proposed API look like?

The proposed api based on the example above could be implemented with 2 ways:

  • Add new number input nzStartingValue which will determine what the first value is for the rate component
    so based on the above example would be
<nz-rate
        [nzStartingValue]="-3"
        [nzCount]="7"
        [nzCharacter]="customCharacter"></nz-rate>

<ng-template #customCharacter let-index>
    <span>{{ index }}</span>
</ng-template>

the default value for nzStartingValue would be 1 to have backward compatibility.
Also notice that index follows the nzStartingValue

  • It would be also possible to determine which values we want for every character nzValues
    i.e. the above scenario would be writter as:
<nz-rate
        [nzValues]="[-3, -2, -1, 0, 1, 2, 3]"
        [nzCount]="7"
        [nzCharacter]="customCharacter"></nz-rate>

<ng-template #customCharacter let-index>
    <span>{{ index - 3 }}</span>
</ng-template>

That solution could provide us more flexibility such as passing even strings as values i.e. ['bad', 'good', 'excellent'] etc.
Also based on nzValues we could omit nzCount as we would be able to compute nzCount from nzValues.
Last but not least we sould provide the value to the nzCharacter template

<ng-template #customCharacter let-index let-value="value">
    <span>{{ index - 3 }}</span>
</ng-template>

Conclusion

nzStartingValue provides more simplicity while nzValues provides more flexibility.
The best outcome would be to have both these options.