Star Rating In Angular

The Code Points September 20, 2022 0

In this article, we will learn how to Star Rating in angular application.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new Angular-Star-Rating

Now, install the ng-bootstrap npm package using the following command into the terminal.

ng add @ng-bootstrap/ng-bootstrap

Now, add the following code under the app.component.html file.

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

Now, add the following code under the app.component.ts file.

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

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

Now, run the application using the ng serve command into the terminal and see the browser screen, which looks like below.

Conclusion

In this article, we learned how to add star ratings in the angular application using the bootstrap.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.