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.

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

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

Change directory to point our project

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


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 )

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

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


Add Star Rating Component

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

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

Custom Rating Template

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

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

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

Leave a Reply

Notify of