The button color is passed to the component as a string and it must be used in the button styles. I managed to adjust the background-color and border, but I can’t change the color of the label when hovering over it. I found a partial solution, but it also changes other buttons:
@for (button of toast.buttons; track button){
<button
[ngStyle]="hovered === 1 ? {'background-color': button.color, 'border-color':button.color, 'color':button.color} : {'background-color': button.color, 'border-color':button.color, 'color':'#fff'}"
(mouseover)="hovered = 1"
(mouseout)="hovered = -1"
(click)="close()"
class="modal-button">
{{button.text}}
</button>
}
Here I tried to change the color of the text on hover using mouseover and mouseout, but this led to the following result:
Without hover:
With hover:
As you can see, when you hover over one button, the second one is also colored.
I tried to look for solutions on the Internet, but I didn’t find anything intelligible.
Can you tell me if there is a way to avoid such a result? For example, passing the value of the button.color variable to a css file or otherwise handling the hover.
Ника Долгирева is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
You can achieve this with pure CSS and :hover. You can use CSS variables for injecting the color into CSS.
.modal-button {
background-color: var(--modal-button-color);
border-color: var(--modal-button-color);
color: #fff;
}
.modal-button:hover {
color: var(--modal-button-color);
}
Template:
@for (button of toast.buttons; track button){
<button
[style.--modal-button-color]="button.color"
(click)="close()"
class="modal-button">
{{button.text}}
</button>
}
1