In my component.css file I have a class.

.blur-map-report {
  filter: blur(8px);
  -webkit-filter: blur(4px);
}

In my component.ts file has property something like this

hasError = false

In my component.html file has another class also called map-report.

<div id="map" class="map-report"></div>

Here I want to add only blur-map-report class if the hasError becomes true. if not only need to keep map-error class. if hasError true I want to keep both the class.

So how can I apply this class conditionally

>Solution :

You can use class binding to conditionally add the class to your div:

<div id="map" class="map-report" [class.blur-map-report]="hasError"></div>