Solution 1 :

Assuming getNextColor() calls getIteriateColor() to get the next color.

On getIteriateColor() let’s loop through "badgesColorSet":["#ffff00","#f51307","#0cc902"] and starting again from [0] when iterate reaches [2].

To remember what color was last used we should store it somewhere on the client where the state remains (e.g localStorage), that way we know what color to choose next.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  badgesColorSet = ['#ffff00', '#f51307', '#0cc902'];
  badgesColorSelected: string;
  constructor() {
    this.getIteriateColor();
  }

  getIteriateColor() {
    // if there is no color in localStorage, set the first color
    if (!localStorage.getItem('badgesColorSelected')) {
      localStorage.setItem('badgesColorSelected', this.badgesColorSet[0]);
    } else {
      // if there is color, select the next color
      const storageColor = localStorage.getItem('badgesColorSelected');
      const colorIndex = this.badgesColorSet.indexOf(storageColor);
      if (colorIndex + 1 > this.badgesColorSet.length - 1) {
        this.badgesColorSelected = this.badgesColorSet[0];
        localStorage.setItem('badgesColorSelected', this.badgesColorSet[0]);
      } else {
        this.badgesColorSelected = this.badgesColorSet[colorIndex + 1];
        localStorage.setItem('badgesColorSelected',this.badgesColorSet[colorIndex + 1]
        );
      }
    }
  }
}

Working example: https://stackblitz.com/edit/angular-ivy-mw7s49?file=src%2Fapp%2Fapp.component.ts

Or for backend something similar except without localStorage.

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

  getIteriateColor() {
    if (!this.badgesColorSelected) {
      this.badgesColorSelected = this.badgesColorSet[0];
    } else {
      let nextColorIndex = 0;
      for (let i = 0; i < this.badgesColorSet.length; i++) {
        if (this.badgesColorSet[i] === this.badgesColorSelected) {
          if (i <= this.badgesColorSet.length - 2) {
          nextColorIndex = i + 1;
          break;
          } 
        }
      }
      this.badgesColorSelected = this.badgesColorSet[nextColorIndex];
    }
    console.log('current color is: ', this.badgesColorSelected);
  }
badge: {bg: badgesColorSelected , fg: 'white' , title: moduleBadge},

Solution 2 :

I think the best way is to use [ngClass] and condition by pointing to the css classes that you have predefined with those colors.

Solution 3 :

In Component:

interface Link {
  label: string;
  route: string;
  icon: string;
}

links: Link[] = [ // your links ]

Inside Template:

<nav>
  <a *ngFor="let link of links; let odd = odd" [href]="link.route" [class.odd]="odd">{{link.label}}</a>
</nav>

Solution 4 :

If you want to “make something” when you refresh, you use localstorage I imagine you can use some like

  color
  badgesColorSet=["#ffff00","#f51307","#0cc902"]
  ngOnInit(){
    let index=localStorage.getItem('indexColor')!=undefined?
                       +localStorage.getItem('indexColor'): -1
    index=(index+1)%3;
    localStorage.setItem('indexColor',''+index)
    this.color=this.badgesColorSet[index]
    
  }

See that at first, if not exist localstorage.getItem(‘indexColor’) (that’s undefined) You makes index=0 and store “0”, the next time you store “1”,”2″,”0″,”1″,”2″… -localStorage only admit “strings” it’s because you use ''+index to convert to string and +localStorage.getItem(‘indexColor’) to conver to number

The use of ├Čndex=(index+1)%3 makes that the value of index becomes 0,1,2,0,1,2,0,1,2…

NOTE: You can use also sesionStorage (Just replace in code localstorage by sessionStorage)

Solution 5 :

this is for the function i did some change to Joosep.P thanks to him .

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;
}
}

this is for the config

 "badgesColorSet":["#f51307","#0cc902","#ffff00","#03fcf8","#03fcb1"],

Problem :

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;

the colors are defined in turnkey-config.json

"badgesColorSet":["#ffff00","#f51307","#0cc902"],

this code is in the mainservice to define the background color of the material badge

badge: {bg: this.getNextColor() , fg: 'white' , title: moduleBadge},

enter image description here

Comments

Comment posted by mak15

I think you should a Math.random or something and deduce a color based on the random value

Comment posted by A Haworth

If you definitely want it to go to the next color on a refresh you are going to have to remember what color you were on before. How are you doing that? (e.g. setting a cookie??).

Comment posted by A Haworth

Yes, which is why I asked how are you going to remember what color was shown last time? Are you using a cookie?

Comment posted by Joosep Parts

Length of the array doesn’t matter, add however many colors you want as you want. Basically what happens is when you call

Comment posted by session

Always you want that “after refresh” makes something with an old value you need “store” a variable in client using localstore, cookies,

Comment posted by A Haworth

Is there a reason you store every value ever used in local storage rather than just store the last used color in a cookie?

Comment posted by SO

read this

By