[![enter image description here][1]][1]
This is the HTML component code:
<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>
<i class="fa fa-trash" (click)="deleteApp(rlist.id)"></i>
</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 the TypeScript component code:
async getApps() {
const AppInfoData = Parse.Object.extend('w_appinfo');
const query = new Parse.Query(AppInfoData);
this.appList = [];
this.appList = await query.descending("updatedAt").find().then(function (result) {
return result;
}, (error) => {
this.toastr.error(error.message, 'Error!!!');
});
}
In the provided screenshot, I manually applied colors to the app list. I am looking for a way to assign a random color to each card whenever the 'create new' button is clicked. Any assistance on how to achieve this would be appreciated.