title: How to display half star rating in my following custom angular star rating example?
body: <p>component.ts</p>
  
  <pre><code>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&lt;this.projectRating;i++){
        this.projectRatingArr.push(i)
      }
      console.log(this.projectRatingArr);
    }
   getArrayValues(index) {
      setInterval(() =&gt; {
        if(index == this.projectRatingArr.length)
          return;
        this.animeArr.push(this.projectRatingArr[index]);
        index++;
      }, 50);
    }
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="item"&gt;
          &lt;div *ngFor="let i of [0,1,2,3,4]"&gt;
              &lt;div class="fav fav-star-default "&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;div class="item"&gt;
          &lt;div *ngFor="let i of animeArr;last as isLast"&gt;
              &lt;div class="fav fav-star is-animating"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm running out of ideas while doing this.</p>
  
  <p>I just want to modify the star to half star when the rating is anything with 0.5</p>
  
  <p>I tried adding a class on top to hide but still remaining half looks empty.</p>
  
  <p>Any help would be appreciated</p>
  
  <p>This is my stackblitz link <a href="https://stackblitz.com/edit/angular-joszev" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-joszev</a></p>