Dynamically add class to div

user_2951306 0
Viewed 8392

Am currently Developing a website using Angular 2/4. Could anyone please let me know how to add a class dynamically to a Div element using Angular. Apparently, am trying to add random bootstrap css color classes to each div background displayed via *ngFor

//Component class
bgarray = ["bg-primary","bg-success","bg-danger","bg-warning","bg-warninig"];

getColour()
{
this.bgColour = this.bgarray[Math.floor(Math.random()*this.bgarray.length)];
return this.bgColour;
}

I have tried using [ngClass] to call a function and the function returns a single class as "bg-danger" or "bg-warning" etc. 

<div class="bg-gray-lighter progress progress-xs">
<div class="progress-bar progress-xs " [style.width]="device.value" [ngClass]="getColour()" ></div>
 </div>

But then it throws an error "expressionChangedAfterItHasBeenCheckedError"

Could you please tell me if there's any workaround to make add a different background color to different progress bars dynamically?

Thanks a ton. Much appreciable if you can help

Here's a sneak peek of what I want to achieve.

view them here

PS: The Progress bar count may Vary, below image contains 4 but it can reach 16 or more in future, hence I would like to dynamically assign a random color to them.

ng-class angular
4 Answers

I'm not sure this will work. But you can give it a try.

<div class="bg-gray-lighter progress progress-xs">
<div class="progress-bar progress-xs " [style.width]="device.value 
 [ngClass]="{getColour():true}" ></div>
</div>


bgarray = ["bg-primary","bg-success","bg-danger","bg-warning","bg-warninig"];

getColour()
{
this.bgColour = this.bgarray[Math.floor(Math.random()*this.bgarray.length)];
return this.bgColour;
}
user_91759950
Related