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


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 { MdbRatingModule } from 'mdb-angular-ui-kit/rating';
        @NgModule ({
          imports: [MdbRatingModule],


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)


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