Kendo UI for Angular

Angular Rating

  • Enable your users to easily leave a rating and modify the values they've chosen.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Rating Header
  • Overview

    The Kendo UI for Angular Rating Component enables users to easily leave a rating and modify the values they have chosen by simply clicking its icons or using the arrow keys.  

    See the Angular Rating Overview Demo 

    Rating Overview
  • Selection Mode

    The Rating component supports the following selection modes:

    • Continuous selection – enabling users to select multiple items  
    • Single selection – enabling users to select a single icon only  

    See the Angular Rating Selection Mode demo 

    Rating Selection
  • Precision Mode

    The component also enables you to choose between two precision modes:

    • Item precision mode – selecting a full value by using the component icons (e.g. 3 stars)  
    • Half precision mode – selecting a half value (e.g. 2.5 stars)

    See the Angular Rating Precision Mode demo 

    Rating Precision
  • Number of Items

    By default, the Kendo UI for Angular Rating component supports a total of five items. However, you have the flexibility to set a different number of items based on your specific needs.  

    See the Angular Rating Number of Items demo 

  • Label

    By default, the Kendo UI for Angular Rating component doesn’t have a label. You have the flexibility to set a custom label by setting its label property to custom string label.  

    See the Angular Rating Label demo 

    Rating Label
  • Icons

    The Rating component is set to display a “star” icon by default. You can easily change the default icon by setting its properties to the desired values.  

    See the Angular Rating Icon demo 

    Rating Icon
  • Disabled and Read-only State

    The component enables you to easily enable or disable the rating. Additionally, you can utilize a read-only state. 

    See the Angular Rating Disabled State demo 

  • Templates

    The Kendo UI for Angular Rating component supports different templates (item, hover item and selected item) that enable you to customize the rating icon.  

    See the Angular Rating Templates demo  

  • Forms Support

    The Rating component empowers you to utilize both template-driven and reactive forms. The template-driven forms enable you to bind the rating value to the forms model by using the ngModel directive. Alternatively, you can utilize the FormGroup to render reactive forms.  

    See the Angular Rating Forms Support demo  

    Rating-Forms Support
  • Accessibility

    Тhe Kendo UI for Angular Rating complies with WCAG 2.2 AA and Section 508 standards. It also adheres to WAI-ARIA best practices for keyboard navigation  and has been tested with popular screen readers. 

    See the Angular Rating Accessibility demo  

    Accessibility 2024
  • Keyboard Navigation

    The component supports the following keyboard shortcuts:

    • Up and right arrow keys to increase the displayed rating value  
    • Down and left arrow keys to decrease the displayed rating value
    • Home – to set the minimum value  
    • End – to set the maximum value  

    See the Angular Rating Keyboard Navigation demo  

    keyboard navigation

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka