I have an outline MatFormField like this:
<mat-form-field appearance="outline">
<input matInput ...>
</mat-form-field>
It shows a nice outline when hovered.
I want to create the same hovering outline effect on this element but programmatically while the user hovers another element on the page.
Is it possible to create the hover effect without actually hovering the element?
What I tried:
focus() the input. That is however not what I want.ng-deep or similar) is not an option as these might change with updates.One simple approach is to capture the mouseover event on the "another element on the page" and change the target's element style
html
<input (mouseover)="hover(true)" (mouseout)="hover(false)" />
<mat-form-field appearance="outline">
<input matInput id="myInput" />
</mat-form-field>
and using a simple function
hover(hover) {
document.getElementById('myInput').style['border-color'] = hover
? 'red'
: 'black';
}