Angular Material Data Table with Paging, sorting, search filter & Pagination

In this Angular material tutorial, we will create a data table with rich features such as sorting, pagination, paging, and search filter.

We will implement all the features listed above using data from a REST API called JSON placeholder.

The table is designed using angular Material components and attributes. We also made use of services in Angular as well as the inbuilt Angular Http Client to consume the public REST API.

Chapters
------------------------
0:00 - Introduction and project preview
02:40 - Creating service to consume REST API
08:09 - Design Angular Material table
17:40 - Display data on the table
22:50 - Configure sorting and pagination
26:27 - Implement the search filter
32:48 - Outro

Topic
------------------------
Angular Material Data Table with Paging, sorting, search filter & Pagination

JSON placeholder Doc:

Source Code:

Join my telegram community:

For more resources on Web Development:

Follow Me on Twitter:

Leave a like and subscribe for more awesome tutorials.
Thanks a lot for watching ❤

[AngeloCarlotto]

Great, content, help me a lot. Thanks directly from Brazil. Cheers

[ssrbala]

Great Content About Material Data Table. Tnks Man Especially for that github repo.

[GustavoRamos-lvwc]

Muchas gracias. excelente video me ha sido de gran ayuda

[IAMKINGOFKINGSLORDOFLORDS]

YOU ARE BRILLIANT THANKS SO MUCH YOU SAVED ME ALOT OF TIME AND GAVE ME AN EDUCTATION! Are you available for mentoring/tutoring? I am building Angular 18 apps for work.

[gunasheelan]

so here i am using rest country api how to implement when i click an country in the table i need to implement full detail of the country can any one help me guys

[iamchiranjeevin]

what if the results are in lakhs and what if the sorting and pagination is http request based ? this wont work in these situations