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

<mdb-rating>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>

Read only

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

<mdb-rating [readonly]="true">
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>

Events

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

<mdb-rating (onHover)="log($event)" (onSelect)="log($event)">
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor() {}

  log(event: any): void {
    console.log(event);
  }
}

Custom text

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

  • 11
  • 22
  • 33
  • 44
  • 55 
<mdb-rating>
  <mdb-rating-icon [after]="'1'" [before]="'1'" class="text-primary px-2"></mdb-rating-icon>
  <mdb-rating-icon [after]="'2'" [before]="'2'" class="text-primary px-2"></mdb-rating-icon>
  <mdb-rating-icon [after]="'3'" [before]="'3'" class="text-primary px-2"></mdb-rating-icon>
  <mdb-rating-icon [after]="'4'" [before]="'4'" class="text-primary px-2"></mdb-rating-icon>
  <mdb-rating-icon [after]="'5'" [before]="'5'" class="text-primary px-2"></mdb-rating-icon>
</mdb-rating>

Custom icons

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

<mdb-rating>
  <mdb-rating-icon [icon]="'far fa-heart fa-sm text-primary'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-heart fa-sm text-primary'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-heart fa-sm text-primary'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-heart fa-sm text-primary'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-heart fa-sm text-primary'"></mdb-rating-icon>
</mdb-rating>

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. 

<mdb-rating>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>

Icons custom color

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

<mdb-rating>
  <mdb-rating-icon [color]="'#673ab7'"></mdb-rating-icon>
  <mdb-rating-icon [color]="'#3f51b5'"></mdb-rating-icon>
  <mdb-rating-icon [color]="'#2196f3'"></mdb-rating-icon>
  <mdb-rating-icon [color]="'#03a9f4'"></mdb-rating-icon>
  <mdb-rating-icon [color]="'#00bcd4'"></mdb-rating-icon>
</mdb-rating>

Dynamic icons

You can make you rating more dynamically by adding different icons 

<mdb-rating>
  <mdb-rating-icon [icon]="'far fa-angry fa-lg'" [color]="'#673ab7'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-frown fa-lg'" [color]="'#3f51b5'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-meh fa-lg'" [color]="'#2196f3'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-smile fa-lg'" [color]="'#03a9f4'"></mdb-rating-icon>
  <mdb-rating-icon [icon]="'far fa-grin-stars fa-lg'" [color]="'#00bcd4'"></mdb-rating-icon>
</mdb-rating>

Styling active elements

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

<mdb-rating>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>
.active {
  color: #00c851;
}

Popover implementation example

Rating allows you to easily add popover functionality

<mdb-rating>
  <mdb-rating-icon class="text-primary" mdbPopover="example text"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary" mdbPopover="example text"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary" mdbPopover="example text"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary" mdbPopover="example text"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary" mdbPopover="example text"></mdb-rating-icon>
</mdb-rating>

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 

<mdb-rating (onHover)="log($event)" (onSelect)="log($event)">
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor() {}

  log(event: any): void {
    console.log(event);
  }
}

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 Type Description
onSelect EventEmitter<number> This output fires immediately when you clicked on icon.
onHover EventEmitter<number> This output fires immediately when you hovered on icon. 
<mdb-rating (onSelect)="onSelect($event)">
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
  <mdb-rating-icon class="text-primary"></mdb-rating-icon>
</mdb-rating>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  onSelect(event: number): void {
    console.log('rating selected: ', event);
  }
}

CSS variables

As part of MDB’s evolving CSS variables approach, rating now use local CSS variables on .rating for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. 

// .rating
--#{$prefix}rating-icon-padding: #{$rating-icon-padding};

SCSS variables

$rating-icon-padding: 0.25rem;