DEV Community

Cover image for Angular: Star rating with no external libraries
Kurapati Mahesh
Kurapati Mahesh

Posted on • Updated on

Angular: Star rating with no external libraries

It is a very simple and very much needed small component required in every other blog to rate the services provided.

Mostly, developers want to use some external start-rating libraries to show much styled and very interactive stars. Though, We can also create such stylistic stars using native JS and CSS support.

I always prefer to write things natively hence here is my implementation for the star rating without using any libraries.

Please let me know any improvements. I am always happy to update the article.


// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Star Rating';

  arr: any[] = [];
  index: number = 0;

  constructor() {
    this.arr = [
      { value: 1, color: 'black' },
      { value: 2, color: 'black' },
      { value: 3, color: 'black' },
      { value: 4, color: 'black' },
      { value: 5, color: 'black' }
    ];
  }

  onClickItem(index: number) {
    this.index = index;
    this.manipulateArr(index);
  }

  onMouseHover(index: number) {
    this.manipulateArr(index);
  }

  onMouseLeave() {
    this.manipulateArr(this.index);
  }

  manipulateArr(index) {
    this.arr.forEach((item, i) => {
      if (i <= index - 1) {
        item.color = 'green';
      } else {
        item.color = 'black';
      }
    });
  }
}
Enter fullscreen mode Exit fullscreen mode
<!--app.component.html-->
<div>
  <ul>
    <li *ngFor="let item of arr" (click)="onClickItem(item.value)" (mouseover)="onMouseHover(item.value)"
      (mouseleave)="onMouseLeave()" [style.color]="item.color">*
    </li>
  </ul>
</div>

<p>User Rated: {{ index }}/5</p>
Enter fullscreen mode Exit fullscreen mode
// app.component.scss
ul li {
  width: 60px;
  cursor: pointer;
  display: inline-block;
  font-size: 80px;

  &:hover {
    color: green;
  }
}
Enter fullscreen mode Exit fullscreen mode

Mostly, everything written is self explanatory. But, explanation always help to the newbies.

In HTML, I populated stars using arr of items with symbol * (available on keyboard) using ul. This arr initialized with 5 elements hence 5-stars displayed. You can see the ts file for the initialized array.

If user hovers on it then its color will change to green otherwise black and it has been handled using two events mouseover and mouseleave and the corresponding methods have been executed each time.

Also, when user clicks on any star then count has been updated below as User Rated: 4/5 and color will be green till selected.

You can follow me: https://twitter.com/urstrulyvishwak

Here you can see how it works:

Thanks

Top comments (2)

Collapse
 
minaemadradi profile image
mina emad radi

what is the function of (&:) ;
thanks .

Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

It is scss syntax. You can refer to sass-lang.com/ for further details.