Angular 7 Bootstrap 4 | Add Star Rating widget in Angular Application using ng-bootstrap Web Component

Star Rating component is widely used in web applications to get user feedback. Rating widget provides a quick way to get user responses on a large number reflecting the quality of service they are provided.

Article compatible with Angular version starting 4+ up to latest version including 6,7,8,9,10,11 and 12.

Web applications dealing with customers can show Rating widget which is fully customizable to meet brand themes.

In this post, we will discuss How to add Star Rating widget in Angular application using ng-bootstrap.

Here we will create a new Angular 7 project using CLI and install ng-bootstrap. After that, we will quickly implement Star rating widget and also discuss it’s available customizations.

Create New Angular Project Using CLI

First, we will create a new Angular Project using Angular CLI. Make sure you have installed the latest version on Angular CLI by running following command

$ npm install -g @angular/cli

Create a new Angular project then select few options asked. We have not selected Angular routing to make this demo easier.

$ ng new NG7BS4
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS

Change directory to point our project

$ cd NG7BS4

If you have Visual Studio Code installed then run following command to open the project in VS Code directly.

$ code .


Install Bootstrap in Angular Project

Let's install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.1.0 )

$ npm install --save @ng-bootstrap/ng-bootstrap

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

  <link rel="stylesheet" href="" >

Import NgbModule ( Bootstrap module )Β in the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


Add Star Rating Component

To show up a simple and basic Star rating component, just add the following template in app.component.html file

<ngb-rating [(rate)]="currentRate"></ngb-rating>
<pre>Rate: <b>{{currentRate}}</b></pre>

Here [(rate)] is like ngModel for two-way binding. <ngb-rating> directive will create a simple rating component.

Events Available

Three events are available [(rate)], (hover), (leave)

ReadOnly Rating

[readonly] takes boolean to disable selection

<ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"></ngb-rating>
Selected: <b>{{selected}}</b>
Hovered: <b>{{hovered}}</b>
<button class="btn btn-sm btn-outline-{{readonly ? 'danger' : 'success'}}" (click)="readonly = !readonly">
  {{ readonly ? "readonly" : "editable"}}

Custom Rating Template

We can have a custom template using <ng-template> tags then adding a template reference variable in [starTemplate]Β parameter

  <ng-template #t let-fill="fill">
    <span class="gift" [class.full]="fill === 100">
      <span class="half" [style.width.%]="fill">🎁</span>🎁


In the app.component.ts file add the following style

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .gift {
      position: relative;
      display: inline-block;
      font-size: 3rem;
      color: #d3d3d3;
    .full {
      color: #ffa600;
    .half {
      position: absolute;
      display: inline-block;
      overflow: hidden;
      color: #ffa600;
export class AppComponent {
  currentRate = 3.2;

Using custom template Star rating can be easily modified for required themes and very easy to implement.

Leave a Reply

Your email address will not be published. Required fields are marked *