In angular, we can easily change the property of a CSS class dynamically, like if I have a class
.my-class {
background: url('..')
}
and if I used my-class as
<div class="my-class">
------
</div>
now, we can change the image effectively by using
[style.background]="url(..)"
like
<div class="my-class" [style.background]="getImageUrl()">
----
</div>
Now, can anyone tell me, is there any solutions if there's have multiple css-class and there I have to change background url all of them, how can I do it?
Like my CSS classes are
.my-class-one {
background: url('..')
}
.my-class-two {
background: url('..')
}
.my-class-three {
background: url('..')
}
and HTML code is
<div class="my-class-one my-class-two my-class-three">
----
</div>
There I need to change all background image URL by calling angular methods
getImageUrlOne()
getImageUrlTwo()
getImageUrlThree()
ngClass can be used in html
[ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': false, 'my-class-three': false}"
JS
getImageUrlOne(){
//.... logic to decide my-class-one should be used or not
return true;
}
You can set different-different flag variable in each function and when function call then set one flag true. set ngclass as below:
<div [ngClass]="{'my-class-one': getImageUrlOne(), 'my-class-two': getImageUrlTwo(), 'my-class-three': getImageUrlThree()}">