How to mix conditions and concatenation in [ngClass]

Question

I have a div which needs to be blurred/reduced opacity on mouseenter.

I've created 2 css class called .blur and .less-opacity

Component.css

.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.less-opacity {
    opacity: 0.5;
}

---

I have variables in the TS to switch from blurred to non-blurred. There also are Input() variables and one of those is the name of a FontAwesome Icon.

Component.ts

...

  @Input() iconName: string; //Contains for example 'bed'
  @Input() subTitle: string;
  @Input() info: string;
  private isVisible: boolean = true;
  private isBlurred: boolean = false;

...

  switchVisible() {
    this.isVisible = !this.isVisible;
    this.isBlurred = !this.isBlurred;
  }

---

I can't figure out how to properly code the [ngClass] to have both conditions for .blur and .less-opacity and at the same time a concatenation for the FontAwesome Icon name.

Component.html

<div class="vignette d-flex flex-column justify-content-center align-items-center" (mouseenter)="switchVisible()" (mouseleave)="switchVisible()">
    <i [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible, 'fa-' + iconName : true }" class="vignette-icon fal fa-3x"></i>
    <p [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible}" class="vignette-subtitle px-3">{{ subTitle }}</p>
    <p class="vignette-info px-3"></p>
</div>

As you can see i've tried with the following method [ngClass]="{'my-class': expression, 'my-class2': expression }"

I don't have console errors but the icon class isn't properly set and result with an error icon.

Here's the result I have when the mouseenter event is fired

The .blur and .less-opacity classes are properly added to the <p>, but the <i> isn't properly set.

My question is : How should I code the [ngClass] for the <i> which needs concatenation in the classname ?

Answer 1

You can use setter to add 'fa-' manually to the @Input()

For example: Add a new variable in your Component.ts

_iconName: string;
@Input()
set iconName(iconName: string) {
  this._iconName= 'fa-' + iconName;
}

Then use _iconName variable in your Component.html instead of iconName.