Star Rating In Angular 5

Most of the application requires feedback from users, at that time we need rating like star rating, so, in this article, I am going to explain how can we create this using Angular.

For implementing rating, we need a star icon which is provided by Glyphicon and Font Awesome library, so in this, we are going to add Font-Awesome library in our application. Now, the question is how can we install the font-awesome library in our project? For this, please follow the following steps,

Create a new project called "SampleRating" using the below command:

ng new "SampleRating"

Now, navigate to this project:

cd SampleRating

Install the font-awesome library using the below command:

npm install --save font-awesome       // use --save for add the dependency to package.json file.

Now, to add Font Awesome CSS icons to our project, we need to go to the "angular-cli.json" file and inside the styles, put this line below the styles.css line:

"../node_modules/font-awesome/css/font-awesome.css"

Now, your "styles" property in "angular-cli.json" file looks like this:

 

 

To verify whether our font-awesome library is added or not, we should use any one of the icons of that into our "app.component.html" file: like,

<h1>
   Checking Font Awesome Library  <i class="fa fa-star"></i>
</h1>

Then, run the project, we will see the star icon on browser, like this:

 

 

That means "font awesome" library was added successfully.

 

Now, let's understand how we can implement the "Star-Rating" in our project.

First, go to app.component.ts file and add the following code, inside the export class "AppComponent", 

title = 'Star Rating';
starList: boolean[] = [true,true,true,true,true];       // create a list which contains status of 5 stars
rating:number;
//Create a function which receives the value counting of stars click,
//and according to that value we do change the value of that star in list.
setStar(data:any){
      this.rating=data+1;
      for(var i=0;i<=4;i++){
        if(i<=data){
          this.starList[i]=false;
        }
        else{
          this.starList[i]=true;
        }
     }
 }

Now, go to “app.component.html” file, and put the below code,

<h1>
  {{title}}
</h1>
<br>
<a *ngFor="let item of starList; let i=index " (click)="setStar(i)">
  <i class="fa" [ngClass]="{'fa-star-o':item,'fa-star':!item}"></i>
 </a>
<br>
Rating :- {{rating}} stars

Here, we used ngFor directive to retrieve the starList, and on click, we called “SetStar()” method and passed the index as “i”.

According to that loop, now we can implement the condition class on the basis of “ngClass”:

<i class="fa" [ngClass]="{'fa-star-o':item,'fa-star':!item}"></i>

If the value is true at that index on the list then it will take “fa-star-o” and assign it into class property otherwise it will take “fa-star”, however, “fa” is common in both the classes, so we used it into class like “class=’fa’”.

 

If you are not comfortable using ngClass then instead using ngClass, you can also use “*ngIf” like :

//use these lines instead of above line
<i *ngIf="item" class="fa fa-star-o"></i>
<i *ngIf="!item" class="fa fa-star"></i>

Now, in browser if we click on the second star then it shows the following output as:

 

 

 

I think now we can easily understand how we can give the star-rating functionality. Now, try out the same thing in a table, that is, now we are going to learn how to provide a rating to each row.

Put the below code inside the “app.component.ts” file:

title = 'Star Rating';
  recordList:any[]=[
    {'Id':1,'Framework':'Angular JS', 'myList':[true,true,true,true,true]},
    {'Id':2,'Framework':'Angular 2', 'myList':[true,true,true,true,true]},
    {'Id':3,'Framework':'Angular 4', 'myList':[true,true,true,true,true]},
    {'Id':4,'Framework':'Angular 5', 'myList':[true,true,true,true,true]},
    {'Id':5,'Framework':'Angular 6', 'myList':[true,true,true,true,true]},

  ];
    setStarTable(record:any,data:any){
      this.rating=data+1;
      var tableList = this.recordList.find(function (obj: any) { return obj.Id === record.Id });
      for(var i=0;i<=4;i++){
        if(i<=data){
          tableList.myList[i]=false;
        }
        else{
          tableList.myList[i]=true;
        }
      }
    }

In this, we created a list of frameworks called “recordList” and inside that list we created another list for stars called “myList”.

Here, we created a function called “setStarTable” and inside that function, we took “record” as a row and “data” which receives the value of counting of stars click as per row.

After that we filtered out the list and stored data into “tableList “on the basis of selected row with the help of .find() like this:

var tableList = this.recordList.find(function (obj: any) { return obj.Id === record.Id });

Due to this we get a single selected row on “tableList” variable, and we need to change only myList value as per our data (click on stars count).

 

Now, go to “app.component.html” file, and put the below code,

<h1>
  {{title}}
</h1>
<br>
<table border=1>
  <caption>Frameworks Rating</caption>
  <tr>
    <td>Id</td>
    <td>Framework Name</td>
    <td>Rating</td>
  </tr>
  <tr *ngFor="let record of recordList">
    <td>{{record.Id}}</td>
    <td>{{record.Framework}}</td>
    <td>
      <a *ngFor="let item of record.myList; let i=index " (click)="setStarTable(record,i)">
        <i class="fa" [ngClass]="{'fa-star-o':item,'fa-star':!item}"></i>
      </a>
    </td>
  </tr>
</table>

Now, the output is:

 

I have attached "SampleRating", a sample project along with this article. This project contains an example of star-rating, but before running this project install node_modules in this project by using the below command: 

1. npm install

Conclusion

As we know, most developers need to implement such kind of functionality in their project, so, after having read this article, we can say that we have the knowledge of how can we implement star rating as well as how we can install the font-awesome library in the Angular project.

I hope it was helpful to you. If you face any problem drop a comment or message to me.