How to set random color to each card shown in screenshot in angular 6?

Question

[![enter image description here][1]][1]

this is component.html -

<div class="row">
  <div class="col-lg-3 col-md-3 col-sm-6 col-12">
    <a href="javascript:void(0)" (click)="openModal()">
      <div class="card card-box HYT " style="border: 1px dashed #3987d9;">
        <div class="card-body ">
          <div class="vimg rect-0">
            <h4 class="KLIU"> <i class="fa fa-plus" aria-hidden="true"></i> Create New</h4>
          </div>
        </div>
      </div>
    </a>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-6 col-12"  
    *ngFor="let rlist of appList | search : query | paginate: { itemsPerPage:10 , currentPage: p }; let i = index;">
    <a href="javascript:void(0)" >
      <div class="card card-box HYT ">
        <div class="card-body ">
          <div [class]='"vimg rect-"+(i+1)'>
            <h4 class="HTRE"><img [src]="rlist?.attributes?.applogo" width="100%"></h4>
          </div>
          <span class="PKU">{{rlist?.attributes?.appname}}</span><br>
          <span class="KHUY">Create-On: {{rlist?.createdAt |date: 'EEE, dd-MMM-yyyy'}}</span>
          <i class="fa fa-edit" (click)="editModal(rlist?.id)"></i>&nbsp;
          <i class="fa fa-trash" (click)="deleteApp(rlist.id)"></i>&nbsp;
        </div>
      </div>
    </a>
  </div>
  <div class="col-12" *ngIf="appList.length>0">
    <ul class="pagination" style="padding-top:25px; margin-left: 35%;">
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
    </ul>
  </div>
</div>

this is component.ts -

async getApps() {

    const AppInfoData = Parse.Object.extend('w_appinfo');
    // To create a new subclass, use the Parse.Object.extend method
    const query = new Parse.Query(AppInfoData);
    // Parse.Query offers different ways to retrieve a list of objects rather than just a single object.
    this.appList = [];

    this.appList = await query.descending("updatedAt").find().then(function (result) {
      return result;
    }, (error) => {
      // The object was not retrieved successfully.
      this.toastr.error(error.message, 'Error!!!');
    });

  }

In the given screenshot i applied color to applist manually. I want to set random color to each card whenever 'create new' button is clicked. Please help me to solve this.

Answer 1

Try like this:

Working Demo

.ts

  addColor() {
    this.appList.forEach(item => {
       item.color = '#' + Math.floor(Math.random()*16777215).toString(16)
    });
  }

.html

<div class="card-body " [style.background-color]="rlist.color">
   ...
</div>