Change background color of input with variables - html

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