Setting border left color dynamically depending on object value from a loop

Issue

My goal is too reach a point where the border left of the cards looks like this:

The loop is as follows:

<ion-card *ngFor="let office of searchItems" class="custom">

ideally id love to use string interpolation and have something like this for example:

style="border-left: 5px solid office.color"

using the "office" from the loop to get each cards office color

i resorted to setting the class="custom"

the css:

.custom {
  border-left: 5px solid var(--my-var);
  }

the JS:

 setStyle(value: string): void {
this.elementRef.nativeElement.style.setProperty('--my-var', value); 

}

then in NgOnInit() I have:

for (let i in this.searchItems){
        document.body.style.setProperty('--my-var', this.searchItems[i].color);
        console.log(this.searchItems[i].color);

      }

this.searchItems looks like this:

but the cards border-left turns out to look like this even though the objects color is different :

Solution

How about using below in the html template:

[style.border-left]="'5px solid ' + office.color"

Answered By - Siddhant