2

I have a number of dynamic "divs" each with their own dynamic "id" from database. In the background there's a service running in intervals of 15 seconds, each time pulling new data and updating the status which will be represented with a different background colour per div.

PS - i am able to do it for a specific "id" (easy), just stuck on how to do it for dynamic "id" with dynamic background colours.

NOTE: The "divs" are randomly located on the page, therefore, doing a loop on the "div" with "ngFor" won't work.

e.g.

<div id="xxx12312" [style.background-color]="dynamicColor">1. Some data</div>
<div id="yyadsfas" [style.background-color]="dynamicColor">2. Some more data</div>
<div id="00012123" [style.background-color]="dynamicColor">3. Some even more data</div>

Ideally i would have the following inside the component with a loop to iterate over the json object like so:

for(let v of rows) {
    this.elementId(v.dynId).style = v.color
}

Any help is much appreciated. Cheers in advance.

Rodrigo Rubio
  • 1,686
  • 2
  • 16
  • 26

2 Answers2

3

I think this is the thing you are talking about :)

  1. Dynamic Id
  2. Dynamic Color
  3. Dynamic Data
<div *ngFor='let v of rows' [attr.id]="v.dynId" [ngStyle]="{'background-color': v.color}">
    {{ v.data }} // assumed that v.data has your data to display
</div>

Here is the working example of Mine and @Gautam's code :

this.elRef.nativeElement.querySelector('#' + x.id).style.backgroundColor = x.color;

https://stackblitz.com/edit/angular-change-color

Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122
  • that makes total sense, thank you. My "divs" however, are located in different locations on the page. Hence, why i need to do it from the component. I didn't mention that on my question, i'll update it now. – Rodrigo Rubio Oct 30 '17 at 06:26
2

inject ElementRef in your constructor and then you can use it to grab the dom element.

if your dynamic data something like below

[ { "id": "abc", "color": "red", "content": "1st div" }, { "id": "pqr", "color": "green", "content": "2nd div" }, { "id": "xyz", "color": "blue", "content": "3rd div" } ]

then loop your dynamic data to set the color and content of div.

this.dynamicData.forEach(
x=>{
this.elRef.nativeElement.querySelector('#'+x.id).style.color = x.color;
this.elRef.nativeElement.querySelector('#'+x.id).innerHTML = x.content;
}
)
Gautam
  • 1,046
  • 5
  • 20
  • if you want to set background color then use 'backgroundColor' property instead of 'color' – Gautam Oct 30 '17 at 07:13
  • This looks exactly what i'm after, thank you. Not fully working though, doesn't seem to recognise style. See editor below: https://stackblitz.com/edit/angular-t3eq4q – Rodrigo Rubio Oct 30 '17 at 10:13
  • @RodrigoRubio, you should put the code inside ngOnit or ngAfterViewInit , please check mu updated answer. – Vivek Doshi Oct 30 '17 at 10:36
  • @RodrigoRubio that is because your view is not rendered and ElementRef returns null. If you do the same logic after the view is initialized then it will work. put the code in ngOnInit() instead of constructor and it will work fine. – Gautam Oct 30 '17 at 10:46
  • GOLD! Thanks guys, that did the trick i.e. putting inside ngOnit. You're a champion. And here's a working reference for others - https://angular-t3eq4q.stackblitz.io – Rodrigo Rubio Oct 30 '17 at 10:46
  • @RodrigoRubio Happy that it solved your query. please accept the answer if it was helpful to you. – Gautam Oct 30 '17 at 10:50