Angular 14 Star Rating System Examples Tutorial

Angular star rating system tutorial; theoretically, this tutorial will help you ascertain all the imperatives to create a star rating system in the angular application using the ng-bootstrap package.

Ideally, the star rating system is often used to measure the quality of a particular product or service.

Generically, In this type of feedback system, the rating is given from one to five stars one star is considered low while five stars is considered the highest.

This is the paradigm of star rating systems often taken into consideration by websites:

  • 1 star is poor
  • 2 star is average
  • 3 star is as expected
  • 4 star is above expectations
  • 5 star is excellent

To develop a star rating in angular, you have to install the NgBootstrap package along with the Bootstrap plugin. The ng-bootstrap is an authentic open-source widget library exclusively built for the angular ecosystem.

Besides, it is ordinarily used with Bootstrap to propel the JavaScript-based UI components in the angular app. Scilicet It doesn’t require any third-party script and makes the frontend development prosperous.

Angular 14 Star Rating System ExampleS

  • Step 1: Install Angular App
  • Step 2: Add NG Bootstrap Pacakage
  • Step 3: Create Simple Star Rating System
  • Step 4: Create Custom Star Rating Template
  • Step 5: Angular Star Rating Demo

Install Angular App

This tutorial recommends installing Angular CLI for generating a brand new angular project; make sure you have atleast the Angular CLI ≥ 9 version installed on your system:

npm install -g @angular/cli

Evoke the recommended command to create a new angular app:

ng new ng-demo-ap

Consequently, get into the project’s folder:

cd ng-demo-ap

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Add NG Bootstrap Pacakage

Next, head over to the terminal, execute the command to commence the NgBootstrap package installation:

ng add @ng-bootstrap/ng-bootstrap

The above command will add the Bootstrap CSS path in src/styles.scss file, it looks something like this:

@import '~bootstrap/scss/bootstrap';

Eventually, we are ready to go ahead and implement the start rating in angular.

Create Simple Star Rating System

There are innumerable widgets in NgBootstrap that you can use after importing their respective module. Out of which you need to use rating module, consequently use NgbRating directive for building a simple star rating in angular:

A directive that helps visualising and interacting with a star rating bar.
– ng-bootstrap

Further, add the suggested code in angular HTML template:

<ngb-rating [max]="5" [(rate)]="rating" [readonly]="false"></ngb-rating>

Plus, you have to define the rating variable with numeric value zero in angular TypeScript template:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  rating = 0;

}

Create Custom Star Rating Template

In this step, you will create a custom star rating template with a child element; hence add the star rating code example in the angular HTML template:

<ngb-rating [(rate)]="rating">
  <ng-template let-fill="fill" let-index="index">
    <span class="star" [class.filled]="fill === 100" [class.bad]="index < 3">&#9733;</span>
  </ng-template>
</ngb-rating>

<p>Rate: <strong>{{rating}}</strong></p>

Next, set the rating in TypeScript template:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  
  rating = 5;

}

Angular Star Rating Demo

Ultimately, you require to start the Angular app:

ng serve

Open app on following url:

http://localhost:4200

Angular Star Rating

Conclusion

The angular star rating tutorial is over; in this tutorial, you learned how to build a simple star rating in angular using the ng bootstrap package. We reckon you would appreciate this tutorial and share it with others.