Angular Material Table Rowspan, Highlight Row, Cell Color

Angular Material Data Table
Share this

Welcome to yet another post in the Angular series : Angular Material Table Rowspan, Highlight Row, Cell Color

In this post, you will learn the following:-

  • Create Angular Material Data Table
  • Apply Row Span
  • Highlight row using background color on mouse hover
  • Apply cell color based on cell value
  • Style the Angular Material Data Table using CSS

Source Code

Complete source code can be downloaded from GitHub repository:

https://github.com/sudipta-chaudhari/AngularMaterialTable_Rowspan_HighlightRow_CellColor

Environment Used

  • Angular 7
  • Angular CLI
  • Angular Material 7.3.5
  • .NET Core 2.2
  • Visual Studio 2017

Application Screenshot

/wp-content/uploads/2019/03/Angular Material Data Table Output

I am not demonstrating the installation and setup of Angular Material or creating Angular components and services using Angular CLI as I believe the reader is already familiar with this. If not, you can easily find the installation and setup instructions of Angular Material at https://material.angular.io/guide/getting-started

In this post, I will use consume a sample fake REST service hosted on internet whose URI is https://jsonplaceholder.typicode.com/todos. I had used this service in my previous article /generic-rest-client-in-csharp/ also.

The response of this service looks as follows: –

I have included only 4 JSON objects from the JSON array in the above snippet, the actual output array contains 200 objects from the REST api https://jsonplaceholder.typicode.com/todos at the time of writing this article which are displayed in the Angular Material table.

Application Features

  • Data is grouped by ‘User Id’ column
  • Row is highlighted when mouse is hovered on a particular row. The second row is highlighted in light blue color as shown in the application screenshot above
  • Table is sortable. You can click the header for sorting in ASC/DESC order. On the ‘Title’ column, the up-arrow symbol can be seen for sorting as shown in the application screenshot above
  • ‘Completed’ column’s cells are colored in Red or Green color. Color is green if value is true and red if value is false
  • Pagination is enabled at the bottom of the grid with the option to change the rows displayed per page

This sample todo service is consumed using Angular service. You can find this service under ClientApp\src\app\services\todo. Source code for this service is listed as follows which calls the todo service which is a HTTP GET service.

The todo component can be found under ClientApp\src\app\components\todo.

The todo component template’s code is displayed as follows: –

App component set’s the component to the loaded on the application’s load as the todo component, code listed as follows:-

Angular Material table is styled using the styles defined in external CSS file todo.component.css, listed as follows:-

Rendering Angular Material Data Table in code

ngOnInit() component life cycle hook calls the RenderDataTable() method to render the data table.

Rowspan setting in code

The todo component defines the function getRowSpan(col, index) which is used to set the row span for the specified column of the Angular Material Data Table. This function is called in the component’s template int the table data tag for the row you want to span as listed follows: –

Cell Color setting in code

In the todo component’s template, [ngStyle] attribute is defined on the table data tag as follows: –

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. If the condition to be checked is large or complex, [ngClass] attribute should be used instead.

Highlight Row with background on mouse hover code

In the mat-row definition, the mouseover event calls the highlight function passing in the reference of the current row as listed follows. The [ngClass] attribute sets the CSSClass property to highlighted which is defined in the external css file todo.component.css.

The component defined the highlight function as follows.

The highlighted class is defined as follows for the mat-row which sets the backgound property’s value to lightblue.

The Angular Material table’s style is set using the following css class as listed follows:-

The Angular Material data table header’s background color is set using the following css classes as listed follows:-

The Angular Material data table header’s font style and text alignment is set using the following css class as listed follows:-

You can find the mat-table documentation at: https://material.angular.io/components/table/overview

This concludes the article : Angular Material Table Rowspan, Highlight Row, Cell Color

I hope you liked this article and would like to receive your feedback. If you have any comments, questions or suggestions, please post them in the comments section below this article. I will try to respond at my earliest or somebody else reading the article and your comment will try to respond.


Share this

Leave a Reply