How to change the color as the index increments for material badges for example( 0,1,2,3,..etc) in angular

Issue

This is the function defined in MainService.ts, it can change the color set in badgesColorSet ,i have 3 colors defined in the json config already and i want these 3 colors to change everytime i open the website lets it is red then i refresh the page it should be green and then i refresh again it should be blue. so is this function correct and should i use for loop ?and i think i need to divide it by something so it increments and goes from 0 ,1 ,2 as index ?

getIteriateColor(){
        //gets  color out of color set from turnkey.config file for badges
    let  badgesColorSet = 0; badgesColorSet < Array.length; badgesColorSet++;
        console.log(badgesColorSet);
        return badgesColorSet;

Solution

getIteriateColor() {

   if (!this.colorIndex) {
       this.colorIndex = 0;
     } else {
   if  (this.colorIndex + 1 > this.badgesColorSet.length - 1) {
        this.colorIndex = 0
       } else {
     //    this.colorIndex = this.badgesColorSet[1];
     this.colorIndex + 1
       }
     }
     console.log('current color is: ', this.badgesColorSet[this.colorIndex]);
     
     this.colorIndex ++ ;
     return this.badgesColorSet[this.colorIndex];
   }

  
}```

Answered By - user18471168