Mat Table Select Row Highlight

If the condition to be checked is large or complex ngclass attribute should be used instead.

Mat table select row highlight. Highlight row with background on mouse hover code. This tutorial is about angular 5 data table here we will be creating a single page angular application from cli command and then integrate material with it and create a sample data table using mattablemodule and mat table directive the data table will support pagination sorting filtering and row selection provided by matpaginator and matsort in matpaginatormodule and matsortmodule. The above column and row formatting options are commonly demonstrated because they are obvious and showy. Update for newer material version md mat.

And then click event when we click on a row it will set row index to the variable namely selectedrow. Add the highlight class in row definiton of md table. In many situations something more subtle is better. Generally if select a cell in ui table that cell is selectionhighlight uitable property.

Dictionary string object gets or sets a collection of additional attributes that will be applied to the created. Specifies the api url form for the table data. I want to know how to do highlight effect a row that have a selected cell. The rule above will apply to every row on every table on your site and so you probably want to use a class or id to limit this effect to tables that you specifically choose which is what we ll do in the following example.

Angular 4 material table highlight a row 3. In the mat row definition the mouseover. Highlight the selected row or column only. Nested select in this example is two or more mat select dan depending on the first mat select.

Class active i selectedrow so we have the condition here if i is equal to selectedrow then it will set an active. Before implementing this example create a new angular component with the name nested. Specifies weather you can select a single row. An example of table row highlighting on hover.

And for the set class to active will add following ngclass code to the element. Mat table display a table data. In the ngstyle attribute the column s data which is either true or false is checked using the ternary operator and based on the result the background color property is set to green or red respectively.