I currently have a page with multiple links such as project1, project2, and project3.
Whenever a link is clicked, it directs to the dashboard page where all projects are displayed. The selected project should be highlighted with a color change.
<a href="http://localhost:4200/#/dashboard;solution=project1;"/>
<a href="http://localhost:4200/#/dashboard;solution=project2;"/>
<a href="http://localhost:4200/#/dashboard;solution=project3;"/>
In order to achieve this highlighting effect, I am utilizing flags in my TypeScript file. However, I am facing an issue where even after hovering over other projects on the dashboard page, the originally selected project remains highlighted.
<div class="thumbnail" [ngStyle]="{'background-color':project1Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}">
<img src="/assests/img1"/>Project1
</div>
<div class="thumbnail" [ngStyle]="{'background-color':project2Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" (click)="mouse(e);">
<img src="/assests/img2"/>Project2
</div>
<div class="thumbnail" [ngStyle]="{'background-color':project2Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" (click)="mouse(e);">
<img src="/assests/img3"/>Project3
</div>
The function "mouse()" has been implemented to reset the flag to false when hovering over other projects. Unfortunately, despite setting the flag to false, the highlighting persists. Can anyone provide assistance with resolving this issue?