View reference image
->Take a look at the reference image provided.
->In the image, a for loop is used to create box designs and displayed above.
->The goal is to change the background color and border color of all boxes using a single HTML class name (as shown in the image).
->Each box should have a different border color and background color.
->Focus on the second box in the image titled "Loans". It contains "Crop Loan Admin" while others only have members. How can a condition be applied for this?
->All boxes have an arrow icon in the first row. How can a condition be set for this?
->To achieve this, check the code where separate divs are used for each box. They need to be iterated using a loop to bind names, border colors, and background colors to all boxes.
Html
<mat-card class="mat mr-4 ml-5 p-3" fxLayout="column" fxFlex>
<div fxLayout="row wrap" fxFlex fxLayoutGap="20px">
<ng-container *ngFor="let item of items">
<!-- all-items -->
<div fxFlex="calc(33.3% - 20px)" class="m-1 pt-3">
<div fxLayout class="cart-styling">
<div class="overview-cart">
<div class="ml-5 mt-4 heading-text">{{item?.title}}</div>
</div>
<img class="pr-5 mt-4" style="width: 90px;" alt="customer_icon" src="assets/icons/firsticon.png">
</div>
<div class="content pl-3">
<div>
<h6 fxLayoutAlign="space-between none" class="pb-1 pt-2 main-line border-bottom"> Members <mat-icon class="arrow-icon">arrow_right_alt</mat-icon> <span class="mr-4 value-color">1000</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom"> Non-Members <span class="mr-4 value-color">200</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom"> Traders <span class="mr-4 value-color">250</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom"> Employee <span class="mr-4 value-color">40</span></h6>
<h6 fxLayoutAlign="space-between none" class="pb-1 line border-bottom">-</h6>
<h6>-</h6>
</div>
</div>
</div>
<!-- /all-items -->
</ng-container>
</div>
</mat-card>
CSS
.overview-cart {
position: relative;
width: calc(100% - 80px);
background-color: #5f7dff;
overflow: hidden;
&:after {
content: "";
position: absolute;
right: -175px;
top: 0;
border-width: 153px;
border-style: solid;
border-color: transparent;
border-top-color: #fff;
z-index: 99;
transform: rotate(19deg);
}
}
.cart-styling {
width: 100%;
justify-content: center;
height: 30%;
border: 1px solid #5f7dff;
}
.heading-text {
font-size: 18px;
font-weight: normal;
color: #fff;
}
img {
width: 90px;
height: min-content;
}
.mat {
height: auto;
}
.line {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
}
.main-line {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 14px;
color: #0b4983;
}
.arrow-icon {
line-height: 0.8;
color: #0b4983;
margin-right: 75%;
}
.value-color {
color: #065a3d;
}
.content {
background-color: #f7f7f9;
}
Ts file
items: any[]= [
{
id : 0,
title: 'Customer',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 1,
title: 'Loans',
submodules: {
Crop_loan_admin: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 2,
title: 'Insurance',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
// ]
// lists: any[]=[
{
id: 3,
title: 'Inventory',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 4,
title: 'Accounts',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
{
id: 5,
title: 'Masters',
submodules: {
members: 1000,
non_members: 200,
traders: 250,
employees: 40
}
},
]