Angular: dynamically change SCSS property in pseudo-class

Question

in my angular component I have the need to dynamically change the border-color of the:hover pseudo class of one item.

The color is found in an object variable in the component but I can't figure out how to target the hover specifically.

In the TS component:

items = [
  { id: 0, color: "#ff4400" },
  { id: 1, color: "#faa73d" },
];

In the SCSS file:

.menuItem {
  border-color: #fff;

  &:hover {
  }
}

So basically I'd like the color in the object to be dynamically applied only to the hover state and not the default one.

Thanks!

Pardeep Jain Pardeep Jain · Accepted Answer · 2019-10-21T11:39:12

Styling to HTML element having pseudo-class is not possible, because pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them and style those elements.

But just as hack you can use mouseover and mouseout event for your use case to toggle style dynamically, for example -

<ul>
  <li *ngFor='let item of items' #ele (mouseover)='ele.style.color = item?.color' (mouseout)='ele.style.color = "black"'>{{item?.id}}</li>
</ul>

Working Example

Angular: dynamically change SCSS property in pseudo-class

1 Answers