I have a json that will return me border color, which is to be applied to a span. JSON is File = [ { 'borderColor':'red' } ]
How to apply class dynamically?
My html is, simple
<div *ngFor="let file of File">
<span dynamicClassComesHere></span>
-
is that worked for you ?Pranay Rana– Pranay Rana2018-05-09 16:38:28 +00:00Commented May 9, 2018 at 16:38
Add a comment
|
3 Answers
Try this,
HTML:
<div *ngFor="let file of File">
<span [style.border-color]="file.borderColor"></span>
</div>
Comments
It should be -
<span [ngClass]='dynamicClass'></span>
working example
Apart from this there are various ways to do so as per official docs
<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
4 Comments
Anna
This did not worked in my case, the comment below worked
Pardeep Jain
@Anna have you checked my working example? and comment below is adding style dynamically not class. I think question is about adding class dynamically
Anna
Yes i check you working ex, same code did not work in my workspace
Pardeep Jain
@Anna then most probably error is somewhere else from your code, please check that !
as its just single style use ngStyle like this
const style = {'borderColor':'red'};//ts file
<span [ngStyle]="style"></span >
<span [ngStyle]="{'borderColor':getBorderColor()}"></span >
in your case
<div *ngFor="let file of File">
<span [ngStyle]="JSON.stringify(file)"></span>
or can be like this
<span [style.borderColor]="getBorderColor()">
getBorderColor() {
style = JSON.parse(`{ 'borderColor':'red' }`);
return style.borderColor;
}
in your case
<div *ngFor="let file of File">
<span [style.borderColor]="file.borderColor"></span>
