CODEWITHSUNDEEP
javascriptcssangular
RS17
RS17

Reputation: 813

How to display half star rating in my following custom angular star rating example?

component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  projectRating = 2;
  projectRatingArr=[];
  animeArr=[];
  counter;
  isHalf = false;
  ngOnInit() {
    this.updateStars();
     this.getArrayValues(0);
  }
  updateStars() {
    for(let i=0; i<this.projectRating;i++){
      this.projectRatingArr.push(i)
    }
    console.log(this.projectRatingArr);
  }
 getArrayValues(index) {
    setInterval(() => {
      if(index == this.projectRatingArr.length)
        return;
      this.animeArr.push(this.projectRatingArr[index]);
      index++;
    }, 50);
  }
}

html

<div class="wrapper">
    <div class="item">
        <div *ngFor="let i of [0,1,2,3,4]">
            <div class="fav fav-star-default "></div>
        </div>
    </div>
  <div class="item">
        <div *ngFor="let i of animeArr;last as isLast">
            <div class="fav fav-star is-animating"></div>
        </div>
    </div>
</div>

I tried keeping a variable called isHalf and whenever I get ProjectRating as 4.5 or any (0.5), I have to get the last star in ngFor loop and hide the right half of that element.

I'm running out of ideas while doing this.

I just want to modify the star to half star when the rating is anything with 0.5

I tried adding a class on top to hide but still remaining half looks empty.

Any help would be appreciated

This is my stackblitz link https://stackblitz.com/edit/angular-joszev

Upvotes: 1

Views: 5983

Answers (3)

Manh Tung
Manh Tung

Reputation: 71

<span class="material-icons filled iconRatingStar" *ngFor="let item of [0,1,2,3,4]; let i = index">
        {{(i + 1) <= value? 'star_rate' : (value % 1 !==0 && (value | round)===(i + 1))?'star_half':'star_outline'}} 
    </span>

'value' is the rating number. just value = 3.5

added RoundPipe

@Pipe({ name: 'round' }) export class RoundPipe {
transform(input: number) {
    return Math.round(input);
}}

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below of using two additional divs- one with full star and half star

  1. Create two stars with condition to display only when there is 0.5 rating

    <div class="item">
      <div *ngFor="let i of animeArr;last as isLast">
        <div class="fav fav-star is-animating" [ngClass]="{'isHalf': isHalf}"></div>
        <div class="halfstar1" *ngIf="isHalf">&#x2605;</div>
        <div class="halfstar2" *ngIf="isHalf">&#x2605;</div>
      </div>
    </div>

  1. Add below CSS for those two stars

     .halfstar1 {
        	position: absolute;
        	top: -6px;
        	right: 15px;
        	width: 34px;
        	font-size: 40px;
        	color: #666;
        	overflow: hidden;
        	z-index: 1;
        }
    
        .halfstar2 {
            position: absolute;
            top: -6px;
            right: 32px;
            width: 17px; 
            font-size: 40px;   
            color: rgb(252, 173, 3);
            overflow: hidden;
            z-index:2;
        }

workign code for reference - https://stackblitz.com/edit/angular-krmrsj?file=src/app/app.component.css

Note: Control position based on your layout and this code works for last value with 0.5 and for other decimal values , right value needs to be adjusted

Upvotes: 1

Marco Castano
Marco Castano

Reputation: 1154

You could fill your array of:

1 = full star; 0.5 = half star;

Add in your html an [ngClass]='colorStar(i)'. Your function will return a class or another according to your value and with CSS you could color half or full star.

Something like this: http://jsfiddle.net/Ah8uZ/

<div class="star gold">&#x2605;</div>
<div class="star gold-gray">&#x2605;</div>
<div class="star gray">&#x2605;</div>



.star {
    display: inline-block;
    width: 20px;
    text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
    display: inline-block;
    color: gold;
    content: '\2605';
    position: absolute;
    margin-left: -16px;
    width: 8px;
    overflow: hidden;
}
.star.gray { color: gray; }

Upvotes: 1

Related Questions