Rating
Angular Bootstrap 5 Star Rating component
Responsive star rating built with Bootstrap 5, Angular and Material Design. 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