CODEWITHSUNDEEP
angularangular-material
Dharmesh
Dharmesh

Reputation: 6003

how to highlight selected item with color in angular?

This is My Folders UI and when I click or select any one folder i want to highlight that specific folder with green color and second question is i hover mouse on any other folder I want to highlight that folder with yellow color. each folder has its different folderid

enter image description here 

<div *ngFor="let folder of folderObjs (dblclick)="addNewFolderRoute(folder.folderid)">
  <mat-icon>folder</mat-icon>
  <span>{{folder.folderName}}</span>
</div>

Upvotes: 1

Views: 3638

Answers (1)

Matt
Matt

Reputation: 2290

Try this

<div *ngFor="let folder of folderObjs" (dblclick)="addNewFolderRoute(folder.folderid)" (click)="activeFolder=folder" class="folder" [class.green]="folder==activeFolder">
    <mat-icon>folder</mat-icon>
    <span>{{folder.folderName}}</span>
</div>

and css

.folder:hover {
   background:yellow;
 }

.folder.green {
   background:green;
}

Upvotes: 4

Related Questions