Angular 7 attach only one class conditionally among fixed classes

Question

My question might be a basic stuff in Angular.

So I have this icon :

 <i class="fab fa-linkedin-in fa-lg"
  (mouseenter)="animateLinkedin()"
  (mouseleave)="deanimateLinkedin()">
</i>

I need to add a class to it when hovering it, so I did this :

export class SidenavComponent implements OnInit {

    constructor() {
    }

    // Set to true on hover element
    linkedInHover = false;

    ngOnInit() {
    }

    animateLinkedin() {
        this.linkedInHover = true;
    }

    deanimateLinkedin() {
        this.linkedInHover = false;
    }
}

I need to activate the class if linkedInHover is set to true, while keeping the current classes without any condition.

How can I manage doing this since seemingly I can't do this with [ngClass] ?

[EDIT] I know when to use the normal CSS :hover, as I say, that's really not my need there because I use a third party css library, so I didn't write the class I want to attach.

I think you should just use the `:hover` selector from CSS for this. See [here for more information](https://www.w3schools.com/cssref/sel_hover.asp) — Korfoo, Jan 11 '19 at 12:53
No that's not my need actually, I get the class from an external resource. — naspy971, Jan 11 '19 at 12:55
And why isn't [ngClass] not working? Like this: `[ngClass]="{'hover-class': linkedInHover }"` — Korfoo, Jan 11 '19 at 12:59
Possible duplicate of [Dynamic classname inside ngClass in angular 2](https://stackoverflow.com/questions/37090877/dynamic-classname-inside-ngclass-in-angular-2) — realappie, Jan 11 '19 at 13:02

score 1 · Accepted Answer · answered Jan 11 '19 at 12:58

1

It is possible with ngClass

<i class="fab fa-linkedin-in fa-lg" [ngClass]="{'<yourClass>':linkedInHover, '<anotherClass>':!linkedInHover}"

See documentation for further insight.

answered Jan 11 '19 at 12:58

M M

655
1
7
16

5

This works, but the `[class.bla]="condition"` is way cleaner. – realappie Jan 11 '19 at 12:59

realappie · Answer 2 · 2019-01-11T12:59:13.693

0

While you can do this with the :hover pseudo element, I will explain you how to do this without ngClass

You can do what you want the following way

<div class="fab fa-linkedin-in fa-lg" [class.hover]="linkedInHover"></div>

But please use the :hover pseudo element for what you're doing as using angular for this is unneeded.

You can see other ways to do binding in the docs on 'template-syntax' here

Update

Your question is a duplicate of the following post

Please formulate your questions a bit more accurately next time, good luck!

edited Jan 11 '19 at 12:59

answered Jan 11 '19 at 12:56

realappie

4,656
2
29
38

I need javaScript for this because I get the class from an external css library, so I didn't write the class content, and in your code you didn't tell how can I still get my normal classes – naspy971 Jan 11 '19 at 12:58
@naspy971 you can still have your other classes separately? See updated answer – realappie Jan 11 '19 at 13:01
@naspy971 I see what you want now, see updated answer again. – realappie Jan 11 '19 at 13:03

score 0 · Answer 3 · answered Jan 11 '19 at 12:56

Use [class.className] syntax like this:

<i 
  class="fab fa-linkedin-in fa-lg" 
  (mouseenter)="animateLinkedin()" 
  (mouseleave)="deanimateLinkedin()"
  [class.classNameYouWantToApply]="linkedInHover">
</i>

You can also use [ngClass] like this:

<i 
  class="fab fa-linkedin-in fa-lg" 
  (mouseenter)="animateLinkedin()" 
  (mouseleave)="deanimateLinkedin()"
  [ngClass]="linkedInHover ? 'classNameYouWantToApply': ''">
</i>

But I think you're over-complicating things here. You could simply use the CSS Preudo-Selector :hover to achieve the same thing.

Angular 7 attach only one class conditionally among fixed classes

3 Answers3