Change background color of input with variables

Question

I have a navbar with 3 levels, second level has a color code that correspond to his respective third level

What I'm trying to achieve is when a level is clicked, the background color of the level change to it's left border color ( For example "Réseau" bg should be full blue ) but I can't make it work properly since the levels are rendered with an NgFor* and the color is a variable coming from a switch() function.

If someone could lead me on what I'm doing wrong there I'd really appreciate it. Been trying NgStyle and NgClass but no success yet.

navbar.html

<div class="w-100 text-nowrap">
      <nav class="nav nav-tabs w-25 flex-column flex-sm-row reduceHeight40  mainNav">
        <input type="submit"
               [value]="label_name[first]"
               checked
               [style.borderColor]="getColors(first)"
               class="flex-sm-fill border-top-0 border-right-0 text-nowrap border-left-0 text-sm-center nav-link alu hovAlu"
               *ngFor="let first of firstLevel"
               (click)="dynamicFilter1(first); ">
      </nav>
        <div class="container alu  dpf  navbar-light">
           <div class="nav nav-tabs flex-column text-nowrap thirdColor flex-sm-row navbar-light" >
             <input  [value]="label_name[second]" type="submit"
                     *ngFor="let second of dynamicLevels1; let index2 = index"
                     (click)="dynamicFilter2(second);selectedItem = index2;selectedItem2 = null"
                     [style.borderLeftColor]="getColors(second)"
                     [ngClass]="{'active': selectedItem === index2}"
                  class="flex-sm-fill ml-2   reduceHeight25  wdt10 text-sm-center nav-link"
                    >
           </div>
        </div>
          <div class="container alu  dpf navbar-light"  *ngIf="ShowImage === false">
            <div class="w-100">
            <nav *ngIf="ShowTemplate"
                 class="nav nav-tabs d-flex   flex-column ml-1 level3 flex-sm-row navbar-light " >
              <input   type="button" [value]="label_name[(third)]"
                       [style.borderColor]="getColors(third)"
                       class="flex-sm-fill  text-nowrap  reduceHeight25 smallText border-top-0 border-right-0 borderless border-left-0 wdt10 text-sm-center nav-link"
                       (click)="dynamicFilter3(third);selectedItem2 = index3"
                       [ngClass]="{'active': selectedItem2 === index3}"
                       *ngFor="let third of dynamicLevels2;let index3 = index">
            </nav>
            </div>
        </div>

</div>

switch function

  colors: any;

  getColors(color) {
    this.colors = color;
    switch (color) {
      case(1):
        return 'rgb(0, 118, 172)';
      case(2):
      case(3):
      case(4):
        return 'rgb(0, 118, 172)';
      case(5):
      case(6):
      case(7):
        return 'rgb(255,185,29)';
      case(8):
        return 'rgb(3,160,128)';
      case(9):
      case(10):
      case(11):
      case(12):
        return 'rgb(169,169,169)';
    }
  }

If you need more code tell me and I'll add it.

Thank's in advance for the help !

Answer 1

I honestly would leave style properties to style sheets alone. That has several advantages, just to mention some:

• let's you easily include colors from defined style guides, which greater business projects usually have
• could be reused with mixins
• doesn't run into many function calls (https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496)
• doesn't let you make syntax error, since your switch-case could return any invalid string

Have an example here:

scss:

$colors-map: (
  '1': rgb(0, 118, 172),
  '2': rgb(0, 118, 172),
  '3': rgb(0, 118, 172),
  '4': rgb(0, 118, 172),
  '5': rgb(255, 185, 29),
  '6': rgb(255, 185, 29),
  '7': rgb(255, 185, 29),
  '8': rgb(3, 160, 128),
  '9': rgb(169, 169, 169),
  '10': rgb(169, 169, 169),
  '11': rgb(169, 169, 169),
  '12': rgb(169, 169, 169)
);

@each $c in map-keys($colors-map) {
  .color-#{$c} {
    border-left: 5px solid map-get($colors-map, $c);

    &.selected {
      background-color: map-get($colors-map, $c);
    }
  }
}

html:

<ng-container *ngFor="let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
  <div class="color-{{x}}" [ngClass]="{selected: x === selectedX}" (click)="selectedX = x">
    I am element {{ x }}!
  </div>
</ng-container>

See stackblitz:

https://stackblitz.com/edit/angular-ivy-thypkb?file=src/app/app.component.ts