How To Build Rating Star In Angular

For this, we have to create angular application and navigate to the project root using below command :

ng new star-rating-example

cd star-rating-example

Now, install NGBootstrap in project using below command :

ng add @ng-bootstrap/ng-bootstrap

In app.component.ts file :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  starRating = 0; 
}

In app.component.html file:

<h2>Angular Star Rating</h2>
<ngb-rating [max]="5" [(rate)]="starRating" [readonly]="false"></ngb-rating>

In app.component.css file:

ngb-rating {
    color: #FFC107;
    font-size: 80px;
}

Now, Run the application:

npm start