From loop using css how to change box color dynamically

Question

I have mentioned my complete code of my project.

Component.ts

This was the method to populate data in a table:

  public get_planet_positions(pos_array) {
            let planet_pos_array = []
            let data_array = [[
                    [], [], [], []
                ], [
                    [], [], [], []
                ], [
                    [], [], [], []
                ], [
                    [], [], [], []
                ]]
    
            let planets = [
                "Sun",
                "Moo",
                "Mar",
                "Mer",
                "Jup",
                "Ven",
                "Sat",
                "Rah",
                "Ket",
                "Asc"
            ]
            var messageStringAfter = "";
            for (let i = 0; i < planets.length; i += 1) {
    
                planet_pos_array.push([
                    planets[i],
                    this.planet_alphabet[pos_array[i]]
    
                ])
    
                console.log(planet_pos_array)
            }
    
            for (let i = 0; i < data_array.length; i += 1) {
                for (let j = 0; j < data_array.length; j += 1) {
                    for (let k = 0; k < planet_pos_array.length; k += 1) {
                        if (i + "," + j == planet_pos_array[k][1]) {
    
                            data_array[i][j].push(planet_pos_array[k][0]);
                        }
                    }
                }
            }
            return data_array
        }

This loop was to call that function 10 times:

for (let i = 1; i < this.arrays.length; i++) {
                    console.log("ll", this.arrays[i])
                    this.planets_array
                        .push(this.get_planet_positions(this.arrays[i]));
                }

HTML

To create a table dynamically:

   <div class="col-md-4" *ngFor="let ar of arrays|slice:1:7;index as i">
                <div>
                  <div class="chart_row" *ngFor="let row of planets_array[i]">
                    <div class="chart_cell chart cell " *ngFor="let cell of row ; index as j;odd as odd; even as even" [ngClass]="['cell1','cell2','cell3','cell4','cell5','cell6']">
                      <div class="">
                        <p class="para">{{j+1}}</p>
                      </div>
                      <br>
                    </div>
                </div>
              </div>

Actual Output

current output image

Expected Output

Each box should be populated with a different color. Is there an easy way to do this? If so, would love to see the best way to do this.

Thank you so much in advance.

second image

You can use https://chancejs.com/web/color.html to generate random color. You can add new value for color in your object at the time of processing. — Niral Munjariya, Nov 23 '18 at 07:06
@BalajiV this is my code i need to give seperate css for each chart-cell https://stackblitz.com/edit/angular-f8mwgu?file=src%2Fapp%2Fhello.component.ts — Aswani A, Nov 23 '18 at 07:22

score 0 · Answer 1 · answered Nov 23 '18 at 05:59

0

You Can Try This

.chart_row:nth-child(1){
   background:red;
}
.chart_row:nth-child(2){
   background:blue;
}
.chart_row:nth-child(3){
   background:green;
}
.
.
.more

answered Nov 23 '18 at 05:59

Hariom Singh

1,420
1
8
21

Thanks @Hariom Singh i have to pass the css dynamically in html according to each iteration (16 classes for 16 boxes) – Aswani A Nov 23 '18 at 06:01
the issue is not fixed – Aswani A Nov 23 '18 at 06:05

score 0 · Answer 2 · answered Nov 23 '18 at 06:46

0

You can simply write css like this class="cell-{{j}}"

<div class="col-md-4" *ngFor="let ar of arrays|slice:1:7;index as i">
    <div>
         <div class="chart_row" *ngFor="let row of planets_array[i]">
             <div class="chart_cell chart cell " *ngFor="let cell of row ; index as j;odd as odd; even as even">
                 <div class="cell-{{j}}">
                     <p class="para">{{j+1}}</p>
                 </div>
                 <br>
             </div>
         </div>
    </div>
</div>

answered Nov 23 '18 at 06:46

omkarb

1
1

j value starts from 0 to 3 for each row ..i need to give separate css for each chart -cell(16 cells are here) how can i achieve that? – Aswani A Nov 23 '18 at 07:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }} – omkarb Nov 23 '18 at 07:07
Thanks, in my case i can't consider i value its return the 0th index array (for 16 cell i is 0) – Aswani A Nov 23 '18 at 07:16
@AswaniA: check this https://stackblitz.com/edit/angular-7bt2rr?file=src/app/app.component.html – omkarb Nov 23 '18 at 07:44
I have updated new image. image name **second image** – Aswani A Nov 23 '18 at 09:35
@AswaniA: so both the matrix should have a different colour for each cell? If, yes then, try to use the random colour generator method instead maintaining different classes. – omkarb Nov 23 '18 at 10:10
if you want change only a "color", not need create different class, you can use < div [style.border-color]="color[i][j]" >, where color is an array – Eliseo Nov 23 '18 at 10:58

score 0 · Accepted Answer · answered Nov 23 '18 at 07:01

If you want to calculate your colors in JavaScript, you can use the NgStyle Directive.

This directive can take a JavaScript object, convert it to CSS, and apply it to the HTML element.

For example:

<div *ngFor="let item of items">
    <div [ngStyle]="{'background-color': item.color}">
        {{item.text}}
    </div>
</div>

Where items looks like this:

items = [
    { text: 'A', color: 'red' },
    { text: 'B', color: 'green' },
    { text: 'C', color: 'blue' },
    { text: 'D', color: '#54e5d7' } // Hex colors also work
];

This way, you can calculate the colors any way you want. In fact, see this answer for randomly generating colors in JavaScript.

For more information, check out the Angular documentation. Also see the AngularJS to Angular quick reference on NgStyle.

Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) https://stackblitz.com/edit/angular-f8mwgu?file=src%2Fapp%2Fhello.component.ts — Aswani A, Nov 23 '18 at 07:24

UI_Dev · Answer 4 · 2018-11-23T10:33:17.103

I think with this you can get some understanding how to apply styles dynamically for each cell put this code

HTML

 <div  class="chart_row" id="chart_row{{i}}"   *ngFor="let row of planets_array;let i = index;">
      <div class="chart_cell"  id="cells{{i}}{{j}}"  *ngFor="let cell of row;let j = index;">{{cell}}</div>
    </div>

TS

import { Component,AfterViewInit,ElementRef, ViewChild} from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements AfterViewInit {
months = [
        "L",
        "A",
        "B",
        "C",
        "K",
        "D",
        "J",
        "E",
        "I",
        "H",
        "G",
        "F"
    ];
    days = [
        "K",
        "L",
        "C",
        "L",
        "C",
        "L",
        "E",
        "F",
        "L",
        "F"
    ];
    index;
    a = [
        "K",
        "L",
        "C",
        "L",
        "C",
        "L",
        "E",
        "F",
        "L",
        "F",
        "u",
        "i"
    ];

    /* Charts start */

    planet_alphabet = {
        "A": "0,1",
        "B": "0,2",
        "C": "0,3",
        "D": "1,3",
        "E": "2,3",
        "F": "3,3",
        "G": "3,2",
        "H": "3,1",
        "I": "3,0",
        "J": "2,0",
        "K": "1,0",
        "L": "0,0"
    }
    data_array_test = [[
                [], [], [], []
            ], [
                [], [], [], []
            ], [
                [], [], [], []
            ], [
                [], [], [], []
            ]]
    public planets_array :any;

    public get_planet_positions(pos_array) {
        let planet_pos_array = []
        let data_array = [[
                [], [], [], []
            ], [
                [], [], [], []
            ], [
                [], [], [], []
            ], [
                [], [], [], []
            ]]

        let planets = [
            "Sun",
            "Moo",
            "Mar",
            "Mer",
            "Jup",
            "Ven",
            "Sat",
            "Rah",
            "Ket",
            "Asc"
        ]
        var messageStringAfter = "";
        for (let i = 0; i < planets.length; i += 1) {

            planet_pos_array.push([
                planets[i],
                this.planet_alphabet[pos_array[i]]

            ])

            console.log(planet_pos_array)
        }

        for (let i = 0; i < data_array.length; i += 1) {
            for (let j = 0; j < data_array.length; j += 1) {
                for (let k = 0; k < planet_pos_array.length; k += 1) {
                    if (i + "," + j == planet_pos_array[k][1]) {
                        data_array[i][j].push(planet_pos_array[k][0]);
                    }
                }
            }
        }
        return data_array;

    }
constructor(private nativeElement:ElementRef) {


 this.planets_array = this.get_planet_positions(["K", "L", "C", "L", "C", "L", "E", "F", "L", "F"]);
 console.log(this.planets_array)

}
ngAfterViewInit(){
      //  for(let i of this.data_array_test){
      //    for(let j of i){
      //       this.cells = this.cells.nativeElement;
      //    }
      //  }
      for(let i =0;i<4;i++){
      //  let id = "chart_row"+i;
      //  var x = document.getElementById(id);
      //  console.log(x);
      for(let j=0;j<4;j++){
        var id = "cells"+i+j;
        var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        var x2 = document.getElementById(id).style.border="solid 1px"+" "+color;
        console.log(x2);
      }
      }


}





}

From loop using css how to change box color dynamically

4 Answers4