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 attempted to keep track of a variable named isHalf and whenever the Project Rating is 4.5 or another value ending in .5, I need to target the last star in the ngFor loop and only display the left half of that element.
While working on this, I have hit a creative roadblock.
My goal is to change the star to a half star if the rating includes a .5.
I experimented with adding a class to hide it but the remaining half appears empty.
Any assistance would be greatly appreciated.
Here is the link to my stackblitz: https://stackblitz.com/edit/angular-joszev