Apply different styles to bootstrap card

Question

I'm working with Angular 9 with a Bootstrap 4 card applying NGFOR to paint as many elements as come from the database.

I have the following array with different styles for that card and I would like them to be applied to each one in a random way.

public color_border = ["border-left-warning", "border-left-info", "border-left-primary"]

The card code is as follows: the div card border-left-info has to be changed. I have tried a new NGFOR but it duplicates everything.

<!-- Pending Requests Card Example -->
    <div class="col-xl-3 col-md-6 mb-4" *ngFor="let data of miDataInterior.DatagreenhouseRecuperado; let i = index">
         <div class="card border-left-info shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">{{data.medidas[0].sensor_type[0].name_comun}}</div>
                <font SIZE=3> {{data.medidas[0].marca}} </font>
                                    <font SIZE=3>({{data.medidas[0].recvTime | date:'dd-MM-yy h:mm:ss a'}})</font>
                <div class="h5 mb-0 font-weight-bold text-gray-800">{{data.medidas[0].attrValue | number:'1.0-1'}} {{data.medidas[0].sensor_type[0].medida}}</div>

              </div>
              <div class="col-auto">
                <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

How could I apply what is contained in the color_border variable in that div?

Error:

<!-- Pending Requests Card Example -->
    <div class="col-xl-3 col-md-6 mb-4" *ngFor="let data of miDataInterior.DatagreenhouseRecuperado; let i = index">
      <div *ngFor="let color_border of color_border" class="card {{color_border}} shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">{{data.medidas[0].sensor_type[0].name_comun}}</div>
                <font SIZE=3> {{data.medidas[0].marca}} </font>
                                    <font SIZE=3>({{data.medidas[0].recvTime | date:'dd-MM-yy h:mm:ss a'}})</font>
                <div class="h5 mb-0 font-weight-bold text-gray-800">{{data.medidas[0].attrValue | number:'1.0-1'}} {{data.medidas[0].sensor_type[0].medida}}</div>

              </div>
              <div class="col-auto">
                <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

Thanks for your help.

EDIT

I am testing directly on NGCLASS, the problem is that it only shows the style of the last element in the array. How can I fix this?

<div  class="card shadow h-100 py-2" [ngClass]="['border-left-primary', 'border-left-info', 'border-left-warning']">

Answer 1

Alternate border

[ngClass]="color_border[i%3]"

A random you need make a function (you can not use Math inside the.html)

[ngClass]="getRandomColor()"

getRandomColor()
{
   return this.color_border[Math.floor(Math.random()*this.color_border.length]
}

If you miDataInterior.DatagreenhouseRecuperado has a property "color" from 0 to 2 you can use

[ngClass]="color_border[data.color]"

NOTE there're severals ways to use [ngClass], see the docs

Answer 2

Try this..

<div *ngFor="let color_border of color_border" class="card shadow h-100 py-2 " [ngClass]="{{color_border}}">