Angular 2: set hover properties using ngStyle

angular ng-style
user2182570 picture user2182570 · Feb 18, 2017 · Viewed 25.7k times · Source

I am trying to set the hover property states using [ngStyle]. The following only sets the normal state colors. When I mouse over the button, the button does not change to the pressed colors as expected.

<button (click)="logout()" 
                    class="btn  register-button"
                    [ngStyle]=" hover ? {'color': theme.logoutButtonColorPressed,
                                'border-color': theme.logoutButtonBorderColorPressed,
                                'background-color': theme.logoutButtonBackgroundColorPressed  } :

                               {'color': theme.logoutButtonColorNormal,
                                'border-color': theme.logoutButtonBorderColorNormal,
                                'background-color': theme.logoutButtonBackgroundColorNormal  }">Logout</button>

Answer

Max Koretskyi picture Max Koretskyi · Feb 19, 2017

If you want to switch styles on hover, add the following to the button 

<button (mouseover)="hover=true" (mouseleave)="hover=false"...

Related questions

Angular - How to apply [ngStyle] conditions

I have a div that I want to style based on a condition. If styleOne is true I want a background colour of red. If StyleTwo is true, I want the background colour to be blue. I've got half of …

Read More
Angular2 Exception: Can't bind to 'ngStyle' since it isn't a known native property

I have done a lot of work with the new Angular2 Framework recently. While testing out some of the features, I ended up with the error: Can't bind to 'ngStyle' since it isn't a known native property While investigating the …

Read More
Change style of pseudo elements in angular2

Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2? in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element. I tried …

Read More