Reference image

->once look at my reference image

->In that image, I have taken one for loop (for creating box design) and made that design above

->But I want to change the background colour and border colour for all the boxes using one HTML class name (like shown in the image)

->Border colour and the background colour should be different for every box.

-> And look at the second box in the image (loans) in that we can see crop loan admin but in other boxes, only members are there how to put condition for this?

->And in all the boxes arrow icon is there in the 1st row only how to put condition for this?

->How to do that? check my code I have used separate div for all the boxes I need to iterate using loop and bind names, border colour, and background colour for 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

      }

    },

  ]

CodePudding user response：

You can not do that with one css class. but you can do this:

adding theme color to you object:

items: any[]= [
  {
    id: 0,
    theme: '#ff0000',
    title: 'Customer',
    submodules: {
      members: 1000,
      non_members: 200,
      traders: 250,
      employees: 40
    }
  },
  {
    id: 1,
    theme: '#00ff00',
    title: 'Loans',
    submodules: {
      Crop_loan_admin: 1000,
      non_members: 200,
      traders: 250,
      employees: 40
    }
  },
];

bind it to the 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">

      <div [style]="'background-color: '   item.theme   '; border: 1px solid '   item.theme   ';'" fxFlex="calc(33.3% - 20px)" class="m-1 pt-3">
      </div>

    </ng-container>
    </div>
  </mat-card>

this will apply specified theme to each card.

CodePudding user response：

store your colors as a property to each item

{

      id : 0,

      title: 'Customer',
      
      theme : "red", // for example 

      submodules: {

        members: 1000,

        non_members: 200,

        traders: 250,

        employees: 40

      }

    },

then use ngStyl in html file (check for the right div to place ngStyle

...

 <ng-container *ngFor="let item of items">

      <!-- all-items  -->

      <div fxFlex="calc(33.3% - 20px)" class="m-1 pt-3" [ngStyle]="{'background-color': item.theme, 'border-color': item.theme}">

        <div fxLayout class="cart-styling">

          <div class="overview-cart">

...