Expert Angular

Rating

The rating directive is also fairly well known. It allows users to rate something, or to display a given rate.

As expected, this directive is simple to understand. It has a rate input that you can hardcode (for example, "rate"=25), bind ([rate]="someVariable"), or apply Two-way Data Binding ([(rate)]="someVariable"). In addition to the rate input, you can use [readonly]="read-only" to make your rate bar non-modifiable.

By default, the rating bar consists of 10 stars. The rate value can range from 0 to 10, including decimal numbers.

Here's an example of a default rate bar inside a new panel:

<ngb-panel>        <template ngbPanelTitle>           <span>Rating bar</span>         </template>         <template ngbPanelContent>            <ngb-rating rate="5"></ngb-rating> </template> ...