Star Rating In Angular 9

In this article, we will learn how to implement the Star Rating in Angular 9.

Star rating can be used to allow the users to share their opinion about the product, photo, facility, etc.

NgbRating component is a directive that helps to visualize and interact with a star rating bar.

Prerequisites:

• Basic knowledge of Angular
• Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new ngbrating-demo

Now, open the newly created project and execute the command given below. It will install ng-bootstrap for the default application.

ng add @ng-bootstrap/ng-bootstrap

Open the app.component.html file and add the code in it.

<h1 class="text-primary">
  <ngb-rating [max]="5" [(rate)]="currentRate" [readonly]="false"></ngb-rating>
</h1>
<p>Rate: {{currentRate}}</p>

Open the app.component.ts file and add the code in it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentRate = 0;
}

Output:

 

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check TypeAhead With Custom Result Template In Angular 9