Html Question posted in
Some basic documentation can be found here.

Html – How to break the CSS styling from all rows inside ngFor?

I am building angular app, and I am using ngFor directive to create a table for the employees. for the employee’s name, when I hover over it, I want this field to change its color (the hover over field only), I use(mouseenter) event binding to change the text color. the problem is when the mouse enters a specific employee name, all the employees names change their text color because of the ngFor directive instead of the specific field only, how can I solve it?

<table border="1">
  <thead>
    <tr>
      <th>Employee Name</th>
      <th>Department</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td (mouseenter)="applyColor=true" (mouseleave)="applyColor=false" 
[ngClass]="{'name-cell': applyColor}">{{ employee.name }}</td>
      <td>{{ employee.department }}</td>
      <td>{{ employee.salary }}</td>
    </tr>
  </tbody>
</table>

I tried to use inner span to include the styling but the same issue still exists.

Tags:

2

Answers


  1. 0

    The problem is that applyColor is a component-wide variable. When true, 'name-cell': applyColor === true will be true for each row. (I added === true for clarity).

    If you want to keep your approach, save the index of the hovered element:

    <table border="1">
  <thead>
    <tr>
      <th>Employee Name</th>
      <th>Department</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees; index as i">
      <td (mouseenter)="hoveredIndex=i" (mouseleave)="hoveredIndex=null" 
[ngClass]="{'name-cell': hoveredIndex === i}">{{ employee.name }}</td>
      <td>{{ employee.department }}</td>
      <td>{{ employee.salary }}</td>
    </tr>
  </tbody>
</table>

    Where hoveredIndex is:

    public hoveredIndex: number | null;
    Login or Signup to reply.
  2. 0

    You could try a simpler approach, using only css hover.

    In the component you just add a distinct class to the name cell (like: <td class='your-class'>{{ employee.name }}</td>and in the css you do your styling on .your-class:hover, no need for mouseenter and mouseleave.

    Here’s a working exemple on Stakblitz.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search