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

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" >

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

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 :

CodePudding user response：

How about using below in the html template:

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