Angular 2: set hover properties using ngStyle

Question

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>

Tillie

what is hover here [ngStyle]=" hover {? – Cheka

it's not clear what you want. if you want to switch styles on hover, add the following to the button <button (mouseover)="hover=true" (mouseleave)="hover=false"... – Cheka

I am trying to replicate the CSS.... .logout-container button:hover { } hoping to set the colors for the button for the hover state. I can set these manually using .logout-container button:hover { color: #FFFFFF !important; background-color: rgba(0, 0, 0, 0.00) !important; border-color: #FFFFFF !important; } – Tillie

Your solution works a treat: The solution is as follows: <button (click)="logout()" class="btn register-button" (mouseover)="hover=true" (mouseleave)="hover=false" [ngStyle]=" hover? ( rest of... style as per above...)>Logout</button> – Tillie

I posted it as an answer. You can upvote or accept it if it helped. – Cheka

is there anything I can add to my answer? – Cheka

Answer 1

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

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

Cheka

Answer 2

If you are in need of selecting individual buttons by changing ngstyle, this is what I did.

btn.component.html

<div *ngIf="socketData && socketData.status === 'ok'">
    <div *ngFor="let button of socketData.message; let i = index"
         [ngStyle]="hovered === i ? pressedStyle(button) : buttonStyle(button)"
         (mouseover)="hovered = i"
         (mouseout)="hovered = -1"
         (click)="reqTicket(button.id)">

      {{button.someImportantData}} - {{button.yetMoreImportantData}}
  </div>
</div>

btn.component.ts

export class ButtonComponent implements OnInit {
    style;
    hovered;

    ...

    private buttonStyle(button) {
        let btnType = this.setBtnType(button);

        this.style = {
            'color': '#' + button.textColor,
            'font-size': button.textSize + 'px',
            'background-color': btnType.background
        };
        return this.style;
    }

    private pressedStyle(button) {
        let pressed = this.setBtnType(button, this.hovered);
        this.style['background-color'] = pressed.background;

        return this.style;
    }

    private setBtnType(button, hovered?) {
        let type = 'normal';
        let btn = {
            normal: {
                background: '#' + button.backColor,
            },
            pressed: {
                background: '#' + button.backColor,

            }
        }

        if(hovered > -1) type = 'pressed';

        return {
            border: btn[type].width + ' ' + btn[type].color + ' ' + 'solid',
            background: btn[type].background
        };
    }

}

Hope this helps someone :)

Picayune

I used a variation of this but added hover property to my model as I didn't have each item as a separate component. – Virnelli

Answer 3

:hover is a pseudo class, it can not be added using style. You should use CSS and ngClass or [class.xxxx]="..".

Consul

why do you think he wants to set :hover? I was thinking he wants to change button styles when hovered – Cheka

Button has more than 2 states: normal, hover, focused, disabled, active. Current approach with ngStyle will fail in the end. – Consul

Answer 4

The article https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ pushed me on the right direction…

<button class="btn register-button" [ngStyle]="styles"></button>

.register-button {
    color: var(--register-button--color, #999);
    background-color: var(--register-button--background-color, transparent);

    :hover {
        color: var(--register-button--hover-color, #555);
        background-color: var(--register-button--hover-background-color, rgba(0, 0, 0 / 10%);
    }
}

    get styles(): Record<string, string> {
        return {
            '--register-button--color': this.configuration?.color || 'red',
            '--register-button--background-color': this.configuration?.backgroundColor || 'black',
            '--register-button--hover-color': this.configuration?.hoverColor || 'blue',
            '--register-button--hover-background-color': this.configuration?.hoverBackgroundColor || 'gray',
        };
    }

The trick is to use CSS variables, that can be set by ngStyle. Nice!

Slender

Great, thank you! clean and powerful solution – Quincy

Answer 5

I was able to use [style.backgroundColor] in html an the :not(:hover) on css

  <label
    *ngFor="let item of items"
    [style.backgroundColor]="item.color">
    {{ item.name }}
  </label>


label:not(:hover) {
  background: transparent !important;
}

Goods