Angular Star Rating Example

In this tutorial we will see how to create simple Angular star rating example. We post blogs, articles, news, etc. on web sites and we sometime expect people to rate our blogs, articles, news, etc. to find out the corresponding gap or issues with our write up. It helps us improve the quality of the blogs or articles.

This example will show you how to rate or cast vote on a blog or article while read by the online users. This example does not use any backend technology to fetch data from persistent storage but it just gives an idea how to rate a blog or article.

You may integrate database server to store blog rating and backend technology to save or fetch the data to/from database server by exposing REST APIs.

Prerequisites

Angular 8

How to create Angular project in Windows

The name of the project is angular-star-rating.

HTML

Now we will see what code we can put app.component.html file on UI (User Interface).

We have put a sample blog content with 5 stars on top of the blog content. On clicking on the stars will be set the rating for the blog.

The number of stars you click, the color will be different for the selected stars. By default the color of all stars are gray.

<div>
	<div [style.color]="index==0?'#be1100':index==1?'red':index==2?'#f48771':index==3?'#b89500':'green'">
		<ul>
			<li *ngFor="let i of arr;let in=index" [style.color]="in>index?'gray':'inherit'" (click)="onClickItem(in)">*</li>
		</ul>
	</div>
	<p style="text-align: justify;">
		The topic of blogging seems to come up a lot in our social media training workshops. The benefits of a quality blog are obvious – fresh content is good for your readers and your rankings. Blogs are easy to set up and even easier to update. We often tell people that if they can use Microsoft Word… they can update a blog.

		As easy as they are to set up, they can be difficult to maintain. A good blog is filled with relevant, timely content that is updated on a regular basis. New bloggers often start out with a bang but then fizzle out when they realize that creating content can be challenging.
	</p>
</div>

CSS

A very basic style is applied to the list item to remove the bullets which appear by default on front of the list items.

ul li {
	width: 10px;
	cursor: pointer;
	display: inline-block;
}

Rate Blog

Now we have done the required coding to define the rating of the blog. We have initialized an array with 5 star rating. So when clicks on as many stars, the stars will change with different color according to the number of stars are selected.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'Angular Star Rating';
  
	arr: any[] = [];
	index:number = -1;
  
	constructor() {
		this.arr = [1, 2, 3, 4, 5];
	}
  
	onClickItem(index) {
		//console.log(index);
		this.index = index;
	}
}

Testing the Application

When you run the application by executing the command ng serve –open on project’s root directory from the command line tool, you will see the following screen in the browser.

angular star rating example

Now you can click on stars as many as you want to rate.

Download

Thanks for reading.

Leave a Comment