How to Highlight Table Row in ngFor on Hover in Angular 4

We often use an HTML table in our applications to show data. Tables are simple and you can use it to populate static and dynamic data. You can populate an HTML table in Angular 4 using the ngFor directive. Here, in this post I’ll show you how to highlight table row on hover using the mouseover event along with Angular 4 ngClass directive.

Hightlight Table Row on Hover in Angular 4 using ngFor and ngClass Directive

In my example here, I am using the ngFor directive to populate the table with data. The data is in a JSON array, which I have defined in my component class.

First, create an Angular 4 project.

The Application Component

Open the app.component.ts file and copy the below code into it.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Highlight Table Row on Hover';
 
  ngOnInit () {  }

  // CREATE A JSON ARRAY.
  employees: any [] = [
    { 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
    { 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
    { 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
    { 'id': '004', 'name': 'Delta', 'joinDate': '01/07/2016', 'age': 19 },
    { 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
  ];

  public selectedName:any;
  
  public highlightRow(emp) {
    this.selectedName = emp.name;
  }
}

I have defined a JSON array named employees with few data in it. I’ll bind the array to a table using ngFor inside my applications template.

I also have a public method named highlightRow() and it has a parameter.

public highlightRow(emp) { }

This method is called by a (mouseover) event, attached to the HTML table. See the template section below. The parameter emp will have the data in the row (row that is hovered or selected). For example if I hover (the mouse) over the 3rd row in the table and use the console to see the emp values, it would show this …

Hightlight HTML Table Row in Angular 4

The data is then assigned to a public variable named selectedName. I’ll use the variable’s value as a condition inside the [ngClass] directive, attached to the table. See the template below.

The Template

<div style="text-align:center;width:500px;">
    <table *ngIf="employees">
        <thead>
            <tr>
                <th>ID</th>
                    <th>Employee Name</th>
                        <th>Date of Joining</th>
                            <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let emp of employees;" (mouseover)="highlightRow(emp)"
                [ngClass] = "{'highlight' : emp.name == selectedName}">

                <td>{{emp.id}}</td>
                    <td>{{emp.name}}</td>
                        <td>{{emp.joinDate | date : 'dd/MM/yyyy'}}</td>
                            <td>{{emp.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

The (mouseover) event calls the method highlightRow() (which I have defined in my component class). The method takes a parameter and I am passing the emp variable to the method.

The Angular 4 [ngClass] is a built-in directive, which you can use to style an element based on some condition.

[ngClass] = "{'highlight' : emp.name == selectedName}"

What it means? Assign the CSS class highlight or apply style (using the highlight class) to the element if emp.name is equal to selectedName. I have defined the variable selectedName in my component class.

This is nice. It saves time and some extra effort to write a separate script for conditionally applying style to an element.

Therefore, when the employee name in the row matches with the value in the selectedName variable, it would highlight the entire row.

Note: I have defined the highlight class in the app.components.css file. See the style section below.

Applying Style to the Table in CSS

Now let’s add some style to table along with class that will highlight the rows. Open app.components.css file in your project folder. Copy and paste the below code to the file:

table {
    width: 100%;
    font: 14px Verdana;
}
table, th, td {
    border: solid 1px #999999;
    border-collapse: collapse;
    padding: 2px 3px;
    text-align: center;
}
th {
    font-weight: bold;
}

table tr.highlight {
    background-color: #4CAF50 !important;
    color: #ffffff;
}

What else can you do?

Alternatively, you can use the (click) event with *ngFor to highlight a selected row. Simply change the (mouseover) event with the (click) event. Like this …

<tr *ngFor="let emp of employees;" (click)="highlightRow(emp)"
    [ngClass] = "{'highlight' : emp.name == selectedName}">

    ...
</tr>

The remaining code is the same.

You may also use the HTML <ul> tag or unordered HTML list tag instead of a table to achieve a similar result. For example,

<ul *ngFor="let emp of employees" (mouseover)="highlightRow(emp)"
    [ngClass] = "{'highlight' : emp.name == selectedName}">

    <li>{{ emp.name }} | {{ emp.joinDate }} </li>
</ul>

Well that’s is. Thanks for reading.

Previous - Create a Pie Chart in Angular 4 with Dynamic Data using Chart.js and ng2-charts



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!