how to make a material badge code simpler and easier without using indexof

March 24, 2022

This is the code for the material badge that needs to be fixed, it should already have the index saved starting from zero and increments and it shouldnt use indexOf or color index and the property should be changed to number instead of string so it doesnt make loops to find the index so the code is cleaner and faster .

 badgesColorSet = ['#ffff00', '#f51307', '#0cc902'];
  badgesColorSelected: string;

  getIteriateColor() {
    if (!this.badgesColorSelected) {
      this.badgesColorSelected = this.badgesColorSet[0];
    } else {
      const colorIndex = this.badgesColorSet.indexOf(this.badgesColorSelected);
      if (colorIndex + 1 > this.badgesColorSet.length - 1) {
        this.badgesColorSelected = this.badgesColorSet[0];
      } else {
        this.badgesColorSelected = this.badgesColorSet[colorIndex + 1];
      }
    }
  }

i’ve tried making it faster and removed the index of but it didnt work

>Solution :

getIteriateColor() {

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

return this.badgesColorSelected;

}
}
I think someone more equipped with knowledge in angular should continue and help you out