Change Multiple CSS property from multiple CSS class dynamically in Angular

Question

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()

Answer 1

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;
}

Answer 2

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()}">