3

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

enter image description here

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 ?

Sixteen
  • 443
  • 1
  • 4
  • 23
  • Looks correct to me. Are you sure the variables contain the values you expect? Maybe output them on the page to be sure? – johey Feb 05 '20 at 10:08
  • 1
    `IsVisible` and `IsBlurred` are private try changing them to public. – joka00 Feb 05 '20 at 10:10
  • Pretty certain @JosefKatič is correct. When it is private, it is undefined in the view which equates to false. – Zze Feb 05 '20 at 10:15
  • I tried to pass the "logic" to the controller to avoid using a concatenation in the `[ngClass]`, so the 'fa-' is added in the `ngOnInit()`. I also switched `private` to `public` but the behavior of the component is still the same. The blur effect works on `mouseenter` but the `` tag has weird behavior. As advised I outputted the `iconName` and it is correctly set (for example `fa-bed`). I don't understand... Would it be FontAwesome related ? – Sixteen Feb 05 '20 at 10:24
  • Please change your last condition to : "true ? 'fa-' + iconName : ''" – Fmerco Feb 05 '20 at 10:32
  • @Fmerco `` throws an error in the console : `Parser Error: Missing expected : at column 57 in [{ 'blur' : isBlurred, 'less-opacity' : !isVisible, true ? 'fa-' + iconName : '' }] ` – Sixteen Feb 05 '20 at 13:47

2 Answers2

2

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.

snowrain
  • 422
  • 4
  • 16
  • This is what I tried : `_iconName: string; @Input() set iconName(iconName: string) { this._iconName = 'fa-' + iconName; }` when I output the _iconName it is properly set as 'fa-bed'. `` The behaviour of the `` is still the same, the Icon is an error Icon and isn't blurred on `mouseenter` – Sixteen Feb 06 '20 at 07:33
0

To achieve this, I had to find a workaround as long as I couldn't find any way to make it work properly with only one [ngClass].

I have wrapped the <i> in a span and apply .blurred and .less-opacity to the span. Additionally, I have a simple [ngClass] for the <i> tag with the iconName set as wanted.

Component.html

...
<span class="vignette-icon" [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible }">
 <i [ngClass]="'fa-3x fal ' + iconName"></i>
</span>
...

Component.ts

...
@Input() iconName: string;

...

ngOnInit() {
 this.setIconName(this.iconName);
}

...

setIconName(iconName: string) {
 if(!iconName.includes('fa-')) {
   this.iconName = 'fa-' + iconName;
 }
}

...

It works fine like this!

Sixteen
  • 443
  • 1
  • 4
  • 23