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.

Transcripts

00:00

in this video let's take a look at

00:02

sorting in data tables just like

00:05

filtering angular material makes it

00:07

really simple to implement the sorting

00:10

feature for your data table now there

00:13

are three simple steps the first step is

00:16

to import the material sorting module so

00:19

in material dot module dot es we are

00:21

going to import Matt sort module and add

00:24

it to the material array

00:28

second step we need to add directives to

00:31

the material table in the HTML so on the

00:36

mat table itself we need to add the mat

00:40

salt directive and to each column header

00:44

cell that should trigger sorting we need

00:47

to add the mat sort header directive

00:50

let's add it to the first three columns

00:53

so on mat header cell mat sort header

00:59

and I'm going to add it to the next two

01:01

columns as well so on mat header cell

01:04

mat sort header and the same again the

01:09

final step is to provide the mats our

01:11

directive to the datasource so in the

01:14

types of file import mat sort from

01:18

angular slash material next we use the

01:23

view child decorator to get hold of a

01:26

reference to the mat sort component so

01:29

first import view child from angular

01:31

slash core and then in the component

01:34

class at view child mat sort sort of

01:40

type mat salt and finally in the ng on

01:46

init method we assigned the mat sort

01:48

component to the sort property of the

01:51

data table so import on in it from

01:54

angular slash core app component

01:58

implements on in it and then we define

02:03

ng on Annette this dot datasource dot

02:08

sort is equal to this dot sort and that

02:14

is pretty much it let's save the files

02:16

and take a look at the browser now when

02:20

I hover on the column header you can see

02:23

an arrow mark when I click on the header

02:26

the elements are sorted in ascending

02:28

order click on the header again the

02:32

elements are sorted in descending order

02:34

click again and the sorting is removed

02:40

similarly you can also

02:42

sort on name and weight ascending

02:46

descending and no salt the symbol column

02:51

on the other hand is not sortable that

02:55

is because we did not attach the mat

02:57

salt header directive to this column so

03:01

there you go

03:02

sorting data table in three simple steps

03:05

include the math sort module add the

03:08

directives in the HTML mats or header

03:11

and Matt sword and finally assign the

03:15

Matt sort component to the sword

03:17

probability of the data source in the

03:21

next video let's take a look at

03:22

pagination

Rate This

5.0 / 5 (0 votes)

Связанные теги
Angular MaterialData SortingWeb DevelopmentFrontend TutorialTable DirectivesUser InterfaceData OrganizationAngular CoreMatSortPagination
Вам нужно реферат на русском языке?