Navigation Menu: Alternating colors for badges (colors should be in sequential order)-CodePudding

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

CodePudding user response：

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/app/app.component.ts

Or for backend something similar except without localStorage.

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

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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)