Angular ngStyle

Question

I have a problem with ngStyle, where I put styles depending on hovered variable. It works, but all the time I see a warning

Type {color: string, background: string, 'border-color': string} | string is not assignable to type {[p: string]: string} 

My function

getSuccessBtnStyleHover() {
        if (this.data && this.data.btnSBorderHColor && this.data.btnSBackgroundHColor && this.data.btnSTextHColor) {
            return {
                'color': this.data.btnSTextHColor,
                'background': this.data.btnSBackgroundHColor,
                'border-color': this.data.btnSBorderHColor,
            };
        }
        return '';
    }

and i tried with

[ngStyle]="(hovered && themeService.getSuccessBtnStyleHover()) || (!hovered && themeService.getSuccessBtnStyle())"
                       (mouseover)="hovered = true"
                       (mouseout)="hovered = false"

and

[ngStyle]="hovered ? themeService.getSuccessBtnStyleHover() : themeService.getSuccessBtnStyle()"
                       (mouseover)="hovered = true"
                       (mouseout)="hovered = false"

where is the problem?

Thanks for any help

enter image description here

Answer 1

You're returning an empty string as your default condition. So the return type is either your CSS object, or an empty string. Try to return {} instead of ''