From loop using css how to change box color dynamically
1
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
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
css angular angular6
asked Nov 23 '18 at 5:48
Aswani A
85
add a comment |
1
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
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
css angular angular6
asked Nov 23 '18 at 5:48
Aswani A
85
can share your code in stackblitz
– Balaji V
Nov 23 '18 at 6:31
You can use 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 7:06
@BalajiV this is my code i need to give seperate css for each chart-cell stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:22
add a comment |
1
1
1
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
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
css angular angular6
asked Nov 23 '18 at 5:48
Aswani A
85
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
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
css angular angular6
css angular angular6
asked Nov 23 '18 at 5:48
Aswani A
85
asked Nov 23 '18 at 5:48
Aswani A
85
edited Nov 23 '18 at 9:31
asked Nov 23 '18 at 5:48
Aswani A
85
asked Nov 23 '18 at 5:48
Aswani A
85
asked Nov 23 '18 at 5:48
Aswani A
85
85
can share your code in stackblitz
– Balaji V
Nov 23 '18 at 6:31
You can use 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 7:06
@BalajiV this is my code i need to give seperate css for each chart-cell stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:22
add a comment |
can share your code in stackblitz
– Balaji V
Nov 23 '18 at 6:31
You can use 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 7:06
@BalajiV this is my code i need to give seperate css for each chart-cell stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:22
can share your code in stackblitz
– Balaji V
Nov 23 '18 at 6:31
can share your code in stackblitz
– Balaji V
Nov 23 '18 at 6:31
You can use 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 7:06
You can use 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 7:06
@BalajiV this is my code i need to give seperate css for each chart-cell stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:22
@BalajiV this is my code i need to give seperate css for each chart-cell stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:22
add a comment |
4 Answers
4
active
oldest
votes
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 6:46
omkarb
141
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 7:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7: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 7:16
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
|
show 2 more comments
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 5:59
Hariom Singh
556118
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 6:01
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
add a comment |
0
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.
answered Nov 23 '18 at 7:01
AtinSkrita
958712
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
add a comment |
0
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);
}
}
}
}
answered Nov 23 '18 at 10:14
Balaji V
525
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441226%2ffrom-loop-using-css-how-to-change-box-color-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 6:46
omkarb
141
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 7:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7: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 7:16
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
|
show 2 more comments
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 6:46
omkarb
141
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 7:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7: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 7:16
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
|
show 2 more comments
0
0
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 6:46
omkarb
141
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 6:46
omkarb
141
answered Nov 23 '18 at 6:46
omkarb
141
answered Nov 23 '18 at 6:46
omkarb
141
answered Nov 23 '18 at 6:46
omkarb
141
141
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 7:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7: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 7:16
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
|
show 2 more comments
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 7:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7: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 7:16
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
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 7:03
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 7:03
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7:07
@AswaniA You can do a combination of i and j like cell-{{ i + '' + j }}
– omkarb
Nov 23 '18 at 7: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 7:16
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 7:16
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
@AswaniA: check this stackblitz.com/edit/angular-7bt2rr?file=src/app/…
– omkarb
Nov 23 '18 at 7:44
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
I have updated new image. image name second image
– Aswani A
Nov 23 '18 at 9:35
|
show 2 more comments
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 5:59
Hariom Singh
556118
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 6:01
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
add a comment |
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 5:59
Hariom Singh
556118
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 6:01
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
add a comment |
0
0
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 5:59
Hariom Singh
556118
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 5:59
Hariom Singh
556118
answered Nov 23 '18 at 5:59
Hariom Singh
556118
answered Nov 23 '18 at 5:59
Hariom Singh
556118
answered Nov 23 '18 at 5:59
Hariom Singh
556118
556118
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 6:01
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
add a comment |
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 6:01
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
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 6:01
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 6:01
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
the issue is not fixed
– Aswani A
Nov 23 '18 at 6:05
add a comment |
0
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.
answered Nov 23 '18 at 7:01
AtinSkrita
958712
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
add a comment |
0
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.
answered Nov 23 '18 at 7:01
AtinSkrita
958712
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
add a comment |
0
0
0
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.
answered Nov 23 '18 at 7:01
AtinSkrita
958712
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.
answered Nov 23 '18 at 7:01
AtinSkrita
958712
answered Nov 23 '18 at 7:01
AtinSkrita
958712
answered Nov 23 '18 at 7:01
AtinSkrita
958712
answered Nov 23 '18 at 7:01
AtinSkrita
958712
958712
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
add a comment |
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
Thanks @AtinSkrita its my code link , how can i apply in this situation(16 css class need to add for each cell) stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:24
add a comment |
0
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);
}
}
}
}
answered Nov 23 '18 at 10:14
Balaji V
525
add a comment |
0
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);
}
}
}
}
answered Nov 23 '18 at 10:14
Balaji V
525
add a comment |
0
0
0
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);
}
}
}
}
answered Nov 23 '18 at 10:14
Balaji V
525
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);
}
}
}
}
answered Nov 23 '18 at 10:14
Balaji V
525
edited Nov 23 '18 at 10:33
answered Nov 23 '18 at 10:14
Balaji V
525
answered Nov 23 '18 at 10:14
Balaji V
525
answered Nov 23 '18 at 10:14
Balaji V
525
525
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53441226%2ffrom-loop-using-css-how-to-change-box-color-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can share your code in stackblitz
– Balaji V
Nov 23 '18 at 6:31
You can use 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 7:06
@BalajiV this is my code i need to give seperate css for each chart-cell stackblitz.com/edit/…
– Aswani A
Nov 23 '18 at 7:22