Sharing Top Content from the Angular-sphere.

Highlight selected row in ngFor

  • Now whenever you click on any row our function setClickedRow(i) will set the value of selectedRow to the index of the row clicked the ngClass argument for that row will evaluate to true and the .active class will be applied for that row.
  • In the Angular2 tutorial, we will see how to highlight selected row in a table using ngFor & ngClass directive.
  • Now will see the template for adding class active to selected row.
  • < tr *ngFor = "let game of games; let i = index" ( click ) = "setClickedRow(i)" [ class .active ] = "i == selectedRow" > < td > {{game.game}} < / td > < td > {{game.platform}} < / td > < td > {{game.release}} < / td > < / tr > …..
  • In the Angular2 tutorial, we have learned to use ngClass with ngFor directive to display data and highlight selected row in Angular 2 application.

Highlight selected row in a table using angular 2. with the help of ngFor and ngClass directive we can easily achieve to highlight particular selected row in Angular 2 application.

@cport1: Highlight selected row in ngFor

#angular2 #angularjs #javascript #typescript

In this Angular2 tutorial, we will see how to highlight selected row in a table using ngFor & ngClass directive.

First will display all the data in the table using ngFor directive. For that, we had already written a tutorial. Please refer below link for more details.

Also, If you are just getting started with Angular 2, here are a few tutorials and courses that can help you with the basics and setup.

What we are building?

In above demo, you can see that it’s highlighting with the blue color selected row based on clicked.

Let’s start with clone repository first. Using below command we can easily download code and start working on that,

Using above command will get all the code related to highlightSelectedRow folder and the go to that folder and then to install dependencies run following command,

To start the application run following command,

After installing and running application you can see following screen,

Let’s start with creating home component in which display list of games in table.

import {Component} from ‘@angular/core’ ;

    selector: ‘app-home’ ,

        game: string,

        platform : string,

            release : “August 23”

            release : “January 5”

            platform: “PS4” ,

            release : “August 23”

            release : “January 19”

            release : “January 26”

and HTML template for home component is as follow,

Start with home.component.ts. In which we have a list of game information which is going to display in the table. ( i.e : games (array of objects) ).

and one function setClickedRow, that will be called when we clicked on a row of the table which is going to set selected row index to the selectedRow variable.

Now will see the template for adding class active to selected row. So that it will highlight table row. Below is the small CSS code which we need to add in CSS file.

In home.component.html template will add a small piece of code for adding an active class with the ngFor directive.

In above code will use ngFor directive for looping through the data and display in the table. and then click event, when we click on a row it will set row index to the variable namely selectedRow. and for the set class to active will add following ngClass code to the element.

[class.active]=”i == selectedRow”

So we have the condition here if i is equal to selectedRow then it will set an active class for that row.

For more detail information about ngClass you can visit it’s official documentation.

Now whenever you click on any row our function setClickedRow(i) will set the value of selectedRow to the index of the row clicked,thus the ngClass argument for that row will evaluate to true and the .active class will be applied for that row.

In this Angular2 tutorial, we have learned to use ngClass with ngFor directive to display data and highlight selected row in Angular 2 application.

Highlight selected row in ngFor

Comments are closed, but trackbacks and pingbacks are open.