Rating

Angular Bootstrap 5 Star Rating component

Angular Responsive star rating built with the latest Bootstrap 5. Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces)

Rating component can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Note: Read the API tab to find all available options and advanced customization


Basic example


Read only

If you want to use a rating to show the score you can use the readonly input


Events

Rating emits events after click and hover element. Check the browser console to test it.


Custom text

You can add extra text before or after the icon using after and before input


Custom icons

You can use other icons easily. Just use icon input.


Number of icons

If you want to display more or less icons in your rating, all you have to do is add as many icons as you like inside the mdb-rating.


Icons custom color

If you want to set your own icon color you can use the color input


Dynamic icons

You can make you rating more dynamically by adding different icons


Styling active elements

You can use active class to set different styles for selected elements


Popover implementation example

Rating allows you to easily add popover functionality


Get selected value

To get the value selected by the user just listen for the onSelect.mdb.rating event that returns a value. Open the browser console to test how it's work

Rating - API


Import


        import { MdbRatingModule } from 'mdb-angular-ui-kit/rating';
        …
        @NgModule ({
          ...
          imports: [MdbRatingModule],
          ...
        })
      

Inputs

Name Type Default Description
readonly Boolean false Disable hover, click and keypress events
after String '' Set a custom text after the icon
before String '' et a custom text before the icon
color String '' Set icon color (for use only on the icons element)

Outputs

Name Description
onSelect This output fires immediately when you clicked on icon.
onHover This output fires immediately when you hovered on icon.