Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning correctly. However, within each row there are icons that should appear or disappear depending on the row's active state. The icons should show on hover/click and hide when the mouse moves out or another row is clicked. Below is the code snippet:
app.component.html
<ul>
<li *ngFor="let row of groups;let i = index" [ngClass]="{'active': clickedIndex == i}" (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i"><span>{{row.items}}</span>---><span>Icon1</span><span>Icon2</span></li>
</ul>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
clickedIndex: number = 0
groups = [{ "id": 1, "name": "pencils", "items": "red pencil", "Status": [{ "id": 1, "name": "green" }, { "id": 2, "name": "red" }, { "id": 3, "name": "yellow" }], "loc": [{ "id": 1, "name": "loc 1" }, { "id": 2, "name": "loc 2" }, { "id": 3, "name": "loc 3" }] }, { "id": 2, "name": "rubbers", "items": "big rubber", "Status": [{ "name": "green" }, { "name": "red" }], "loc": [{ "name": "loc 2" }, { "name": "loc 3" }] }, { "id": 3, "name": "rubbers1", "items": "big rubber1", "Status": [{ "name": "green" }, { "name": "red" }], "loc": [{ "name": "loc 2" }, { "name": "loc 3" }] }]
}
app.component.css
.active{
background:red;
color:#FFf;
}