Angular Material Tutorial - 30 - Data table Sorting

Codevolution

29 Apr 201903:24

Summary

TLDRThis video script offers a concise guide on implementing sorting functionality in data tables using Angular Material. It outlines three straightforward steps: importing the MatSortModule, adding sorting directives to the table headers in HTML, and assigning the MatSort component to the datasource's sort property. The demonstration showcases how easy it is to enable sorting in ascending and descending order, and how to make certain columns non-sortable. The script effectively communicates the process, making it accessible for users to follow and apply in their own projects.

Takeaways

📚 Import the Material Sorting Module by adding it to the material array from 'material.module.ts'.
🔧 Add sorting directives to the Material Table in the HTML by using the 'matSort' directive on the 'mat-table' element.
🎯 Apply the 'mat-sort-header' directive to each column header cell that should trigger sorting for the first three columns.
📈 Extend the sorting functionality to additional columns by adding 'mat-sort-header' to the subsequent 'mat-header-cell' elements.
🔄 The final step involves providing the 'matSort' directive to the datasource using the 'ViewChild' decorator to reference the 'matSort' component.
🔍 Import 'ViewChild' from '@angular/core' to get a reference to the 'matSort' component within the component class.
🏷️ Use the 'ViewChild' decorator of type 'MatSort' to associate the 'matSort' component with a variable in the component class.
🔑 Assign the 'matSort' component to the 'sort' property of the datasource in the 'ngOnInit' method.
👀 Observe the visual cue of an arrow mark on the column headers indicating the sorting functionality.
↕️ Clicking the header sorts elements in ascending order, clicking again switches to descending order, and another click removes the sorting.
⚙️ The 'symbol' column remains non-sortable as the 'mat-sort-header' directive was not attached, demonstrating the specificity of sorting directives.

Q & A

What is the main topic of the video?
-The main topic of the video is sorting in data tables using Angular Material.【2】
How many steps are involved in implementing sorting for a data table in Angular Material?
-There are three simple steps involved in implementing sorting for a data table in Angular Material.【2】
What is the first step in adding sorting functionality to a data table in Angular Material?
-The first step is to import the MatSortModule from the @angular/material module and add it to the material array.【2】
What directive needs to be added to the mat-table element for sorting to work?
-The matSort directive needs to be added to the mat-table element for sorting to work.【2】
Which directive should be added to the column header cells to enable sorting on those columns?
-The mat-sort-header directive should be added to the column header cells to enable sorting on those columns.【2】
How can you get a reference to the MatSort component in the Angular component class?
-You can use the @ViewChild decorator to get a reference to the MatSort component in the Angular component class.【2】
What property of the MatTableDataSource should be assigned the MatSort component?
-The sort property of the MatTableDataSource should be assigned the MatSort component.【2】
What happens when you click on a sortable column header in the data table?
-When you click on a sortable column header, the elements are sorted in ascending order, and clicking again sorts them in descending order. A third click removes the sorting.【2】
Why might a column not be sortable in the data table?
-A column might not be sortable if the mat-sort-header directive is not attached to its mat-header-cell element.【2】
What feature is planned to be covered in the next video?
-The next video will cover pagination in data tables.【2】

Outlines

00:00

📊 Implementing Sorting in Angular Material Data Tables

This paragraph outlines the process of adding sorting functionality to a data table using Angular Material. The first step involves importing the MatSortModule from '@angular/material' and adding it to the material array within the module file. The second step is to apply the matSort directive to the mat-table element in the HTML and the matSortHeader directive to the header cells of the columns that should be sortable. The final step is to assign the MatSort component to the dataSource's sort property, which requires importing 'sort' from '@angular/material' and using the ViewChild decorator to get a reference to the MatSort component. The video script demonstrates how sorting can be toggled between ascending, descending, and no sort order by clicking on the column headers, and notes that columns without the matSortHeader directive remain unsortable.

Mindmap

Keywords

💡Sorting

Sorting refers to the process of arranging items in a specific order, typically based on a particular attribute or set of rules. In the context of the video, it involves organizing the data within a data table in either ascending or descending order based on the user's selection of a column header. This is a fundamental feature in data presentation, allowing users to easily understand and analyze data sets by prioritizing relevant information.

💡Data Tables

Data tables are structured representations of data, displayed in rows and columns, that allow for efficient organization, manipulation, and interpretation of information. In the video, the data table is the central element where sorting is being implemented, showcasing how the data can be rearranged to reflect different perspectives or insights based on user interaction.

💡Angular Material

Angular Material is a UI framework by Google that provides Material Design components for Angular applications. It is a powerful tool for web developers to create beautiful and functional user interfaces. In the video, Angular Material is used to build the data table and implement the sorting feature, highlighting its ease of use and the visual appeal of the components.

💡MatSortModule

MatSortModule is a specific module within Angular Material that facilitates the addition of sorting functionality to table headers. It is a crucial component for enabling users to sort data in a meaningful way, directly affecting the usability and interactivity of the data table.

💡Directives

Directives in Angular are annotations that guide the framework on how elements in the template should be processed and rendered. They are used to bind data, manipulate the DOM, or add specific behaviors to elements. In the video, directives are used to attach sorting functionality to the table headers, making them interactive and responsive to user actions.

💡MatTable

MatTable is a component provided by Angular Material that represents a table in the UI. It is a flexible and feature-rich element that allows for the display and manipulation of tabular data. In the video, the MatTable serves as the foundation for implementing sorting and other features, demonstrating its role in creating dynamic and interactive data presentations.

💡DataSource

In the context of Angular and data tables, a DataSource is an object responsible for providing data to a table and managing operations such as sorting and pagination. It serves as the bridge between the data model and the table component, ensuring that the table displays the correct information and responds appropriately to user interactions.

💡ViewChild Decorator

The ViewChild decorator is a feature in Angular that allows a component to get a reference to a directive or another component in its template. This is particularly useful for interacting with child components or directives programmatically. In the video, the ViewChild decorator is used to obtain a reference to the MatSort component, which is then assigned to the data source's sort property to enable sorting.

💡MatSortHeader Directive

The MatSortHeader directive is a specific directive provided by Angular Material that enables sorting when applied to a table header cell. It is a key component in the sorting functionality of a data table, allowing users to sort the data by clicking on the headers of the columns they wish to sort by.

💡Ascending Order

Ascending order is a sequence in which items are arranged from the lowest to the highest value, typically based on a numerical or alphabetical sorting criterion. In the context of the video, ascending order is one of the sorting options available to the user, allowing them to organize the data table in a way that starts with the smallest or earliest items and progresses to the largest or most recent.

💡Descending Order

Descending order is a sequence where items are arranged from the highest to the lowest value, based on a specified sorting criterion. This is the reverse of ascending order and provides users with an alternative way to view and analyze data. In the video, descending order is achieved by clicking on a column header again after the data has been sorted in ascending order, changing the sort direction to move from the largest or most recent items to the smallest or earliest.

Highlights

Sorting in data tables is made easy with Angular Material.

There are three simple steps to implement sorting in a data table.

The first step is to import the Material sorting module.

The Material sorting module is imported from 'material.module.ts'.

The second step involves adding directives to the Material table in the HTML.

The 'mat-sort' directive is added to the 'mat-table'.

The 'mat-sort-header' directive is added to column header cells to trigger sorting.

The 'mat-sort-header' directive is added to the first three columns as an example.

The final step is to provide the 'matSort' directive to the datasource.

The 'matSort' directive is imported from 'angular/material'.

The 'ViewChild' decorator is used to get a reference to the 'matSort' component.

The 'ViewChild' is imported from 'angular/core'.

The 'matSort' component is assigned to the 'sort' property of the datasource in the 'ngOnInit' method.

When hovering over the column header, an arrow mark appears indicating sortability.

Clicking on the header sorts the elements in ascending order.

Clicking the header again sorts the elements in descending order.

Sorting can be removed by clicking the header a third time.

The symbol column is not sortable as it does not have the 'mat-sort-header' directive attached.