Angular Material Data Table - Paging, Sorting and Filter Operation

🍒 Related Videos
Next Video : • Angular Material Popup...
Previous Video: • Angular Material - Fir...
MEAN Stack CRUD: • MEAN Stack CRUD Operat...
Angular Tutorials: • Angular Tutorials
(Angular & .Net Core API) More Videos: • Angular & Asp.Net Core...
📂 GitHub Repository
► goo.gl/kXGxaj
💖 Channel Support
➤ Paypal: bit.ly/3L36ut4
➤ UPI App: geni.us/ScanQR...
➤ Amazon: geni.us/Amazon...
💌 For Business Inquiries
➤ [e-mail]
🚶‍♂️ Follow us
Facebook : / codaffection
Discord : / discord
Twitter : / codaffection
---
Angular Material Data Table - Paging, Sorting, Filtering
Content discussed :
- render angular material table from a list
- display processing data - no data & loading data
- implement paging, sorting and filter operation
- customize filter operation of angular material data table
#AngularMaterial #Angular #CodAffection

[@CodAffection]

goo.gl/bPcyXW : Buy me a Coffee. bit.ly/2Z41yM0 : Next Part goo.gl/3VQn29 : Prev. Part bit.ly/2KQN9xF : More Angular Tutorials bit.ly/3Ktqess : MEAN Stack CRUD bit.ly/47yygKq : (Angular & .Net Core API) Tutorials

[@chinmaypadsalgi5868]

Hello, thank you for the video. I am learning angular watching your videos. I am a beginner. I have some queries. Need to contact you.

[@MajdAA]

thank you, I've been struggling with a little problem for the whole day until i found your video

[@TheAJMarketing]

This is an extremely underrated channel with really high quality content. The way you explain each & everything is amazing, that's how one should be teaching. Love from Pakistan

[@afrikanking4022]

So I decided to forget about Vue JS , Php and Java to focus entirely on DotNet Core and Found CodeAffection. Thank you so much you have made my life super exciting I love you man. Keep doing the good work.

[@stevehoff]

If you're doing it to find a job, you're on the right path. LOTS of enterprise level jobs for dotnet / angular.

[@afrikanking4022]

@@stevehoff Yes its to find a Job as a dotnet developer. But id like to start off by conducting dotnet workshops

[@PIMVid]

Best channel coding tutorial. Subscribed!!!

[@kiddapocalypse]

i love how you go through some errors and how you walk us through them especially during the element | json part. I personally think one of the best ways to learn coding is through finding solutions to errors.

[@CodAffection]

thanks for your kind words :)

[@CharlesOllavo]

Thank you for all your tutorials free, I know you take time to do this, so this away I will buy a coffee for you.

[@CodAffection]

Thanks for your compassion. it really motivates me to keep making more videos. please subscribe to the channel if you haven't already.

[@ashtonuranium2994]

33:15 ~ 35:46 if you somehow face error on the loading out the department using [name]. Go to your firebase -> open back your employees -> change the every department value from 1,2,3,4 -> abc1 (or either abc2, abc3 or abc4). Surely can work!!

[@andreimihailescu9213]

Thanks. This worked.

[@ashtonuranium2994]

@@andreimihailescu9213 you're welcome

[@somvanshidhruv]

I'm getting the following error - TypeError: Cannot read property 'name' of undefined at DepartmentService.getDepartmentName In firebase i have departments and under that there is abc1 abc2 abc3 abc4. What should I do. Didn't get your comment.

[@exvexv7361]

I want to use mat table for web api, so please make a vdo on how to use mat table for data coming from web api.

[@pvsasirekha1]

your way of teaching enriching learners

[@sleepingplanet]

Your videos are extremely helpful. Please continue to flesh out this firebase application. Everything you are doing makes sense and is the best source of information available.

[@CodAffection]

Glad you found the video helpful, thanks for your wonderful feedback.

[@yonathangutierrez1733]

in ViewChild add {static: false}... in new versions expects two arguments

[@theHouseOfLofi]

I've been watching a lot of your videos and all of them are so helpful, well structured and explained in an easy way. Keep on doing this excelent work mate !

[@CodAffection]

Glad you found my works helpful. thanks for the support.

[@maheshrokade5]

best video to understand the mat-table.....thank you so much

[@CodAffection]

Glad it was helpful!

[@techystudio2899]

Subscribed because of nice teaching style + good content - Keep doing this

[@CodAffection]

thank you, I really appreciate that.

[@sniperalex117]

Finally I found out how to use Sort and Paginator on (external) json data. Thank you

[@CodAffection]

Glad you found the video helpful.

[@TheEntium]

Thanks for your help brother sorting, pagination and filtering is getting so easy in angular material ..

[@CodAffection]

yes it is.

[@vidyasalimath6177]

How to Insert row to a specific position or for example If I have selected the 3rd row and click on add button then row should be inserted to the 4th row.Thanks in advance!

[@ponnip8307]

Helpfull one..can you post vedio for customising more than 1 theme which will affect whole project

[@petermuthiks]

This tutorial was really helpful to me. very clear and straight forward. Can you have a video to populate a material table from a web api with mysql database?

[@boopathisomasundaram147]

Its very useful video,Thanks

[@girmamoges941]

Why have you used Firebase ? Why not SQL express local host. *** I can say your examples are excellent and detailed. excellent with flying colors.

[@hirushafernando7546]

Thank you for this video. It was very helpful to me

[@viniciussantosaguiar9543]

One from the best ever vídeos!

[@noorulain9468]

This tutorial is really helpful but that example code data services are not working. Any solution?

[@themysteryman-e2j]

Thank you veryy much. You are GREAT. Appreciate your hard work

[@kingstdz]

Hi thanks for tuto, is there this example on angular 14 any proposition i ll apreciate thanks

[@juanchox0929]

Thank you! I love your videos, they help me with a project i'm working in :)

[@CodAffection]

Glad you found the video helpful. hope I can make more helpful tutorials like this.

[@mithunkv8749]

how to add sorting to instead of ?

[@pedrocastillo9143]

Hello everybody. Is possible to do a mat-table with many elements per row like a gallery? Thank you

[@studymaterial8383]

can we set initial value of items per page different for different variable

[@riyazbasha9776]

Sir one video on creating dynamic menu navigation please..

[@sarithakonanki7901]

@codeAffection hey, in that sorting not showing correct order of sorting, can u see that?

[@berfimkorkmaz9865]

Great tutorial :) I want to ask that how can I add new row like footer to set sum of the filtered or non filtered number datas ?

[@probirroy6874]

There is any chance to hide the first column of mat-table with angular?

[@aakhashs5586]

Thanks bro.It help me to clear ERROR

[@RajuSharma-po2rt]

thnks for your videos , its really helpful

[@lk2986706we]

this tutorial is really helpful for me, thanks!!

[@CodAffection]

glad you found the video helpful.

[@akhilpatil455]

Hey your video tutorial was awesome. Will you please help me out how to add dates in mat-table with proper formatting? Because I am unable add date in dynamic binding data table with proper formatting.

[@jaydeepnayak5197]

Awesome !!..Great Tutorial Thanks a Lot.

[@udayvardhane1502]

Hi, after create, the popup closes, but the table is not reloading ? we are using api call to get the data. please help!

[@clarkjason2003]

Hi, This is client side Paging, Sorting and Filter(?) a server side version would be most helpful :-)

[@SAAMY_1414]

Why hireDate value is not getting saved to Database ?

[@mizanrahman7287]

Can not show department name in table. no error in debugger console but error in browser console is "Cannot read property 'name' of undefined". Need help.

[@dilshadahmad0201]

Why hireDate is not being inserted in the firebase database? Initially when you inserted the first employee the hireDate was not inserted. Now the hireDate is being shown inserted. How did you do this? Kindly tell I am stuck at this juncture. Thanks

[@flexir3854]

Very good content cant find the backend DB

[@muhammadahmed1890]

Please add a picture section to upload the picture to firebase and retrieve it.Thanks

[@seattlemusic5788]

Thank you for great tutorial. Do you have solution for this situation like received data in different format like that { "cars": [ { "name": "dodge", "description": "Faster and aggressive car ", "price": 20000, "inventoryID": "ddg-9367", "stock": true }, { "name": "chrysler", "description": "Red with yellow strips car ", "price": 30000, "inventoryID": "chr-3498", "stock": false }]}

[@harithkhan1631]

Very easy to follow. Thanks a lot for the tutorial =)

[@CodAffection]

Thanks for the comment.

[@nadirsiddiqui9559]

please help regarding showing department name using web api core,, thanks in advance.. I am following all your angular videos..

[@alvesluk]

Can you do a tutorial of how to store the data in mysql? I know you've done with firebase, but I don't know the way to do with MySQL.

[@fatihhgocer]

It works. Good Tutorial !

[@arifhossain7633]

I can't update material table while adding or updating employee because material table in employee-list component whereas we did add or update operation in employee component. how could I update the material table after add or update record?

[@federicofigueredo9985]

You´re god my friend. Excelent explanations. As soon I get a developer job I ´ll donate generously.-

[@CodAffection]

Thank for your wonderful feedback!. I appreciate your future support.

[@mounatabarki1731]

how the dataSource refresh automatically after update, delete, add operations!!!!

[@kevinnava4376]

You are the BOSS

[@rannajeesharma9224]

Hi I am using the angular 8 and angular material design. But as your vedio i am not able to map the data into grid. Kindly suggest.

[@kumarshree3970]

Hi...can we do column resizing using mat-table??

[@ilhamefendy9868]

this is a truly great tutorial, if you don't mind, I would like to request you to create this using firestore database. thank you so much

[@CodAffection]

Yes, I have to. thanks for the suggestion.

[@GaabrielRoodriz]

I have a problem with including the getDepartamentName method. With my return return _.find (this.array, (obj) => obj. $ Key === $ key) .name; I get an error saying there is no name, but it is in my database like yours

[@afrikanking4022]

I am getting this error in Angular 10 TS2339: Property 'form' does not exist on type EmployeeComponent the form property is declared inside the Service and called in the Employee.component.html

[@michaeliziken3540]

I thought you would use ngif to hide the loading indicator

[@berkecandincer9925]

Thank you so much

[@bonganinyoni4992]

Thanks this was helpfull, is it possible to get a video on how to connect this to SQL Server, Thanks

[@OnlineZiggasa]

I need a video from you "User Management system" Like Authentication and Authorization And Also Token , with Web API and Angular .Advance Thanks Brother.

[@CodAffection]

sure.

[@amalabid9512]

thanks fro this video, how do i do this with asp.net i just need to do this but get data from asp.net. CodAffection i need a help please

[@afrozjahamalik7986]

Footer part is not working properly What to do

[@rahulvasantborde243]

We can’t complete this transaction. The recipient has exceeded the receiving limit and must provide more info to lift the limit. PayPal error

[@khusikar676]

Hiii anyone plz help me????? On mat table after filter by date-range my pagination and sorting is not working..... Plz help meeeeee

[@Real_Good_Joe]

Does anyone know how to make the paginator display clickable pages (numbers 1,2,3...100 for example)?

[@denisentanas.brahmana6411]

using data from backend api please

[@karenjang5201]

excellent contents!!!

[@marcelmaragall7817]

We all love you.

[@cristiboanta2499]

very good!

[@devallasaicharan]

I dont have unique IDs coming from back end. How can I create a unique ID in angular?

[@pritpalkaur5582]

You are awesome 👏🏽 I

[@PraveenKumar-cx6hn]

I am getting error in table footer. compiler.js:485 Uncaught Error: Template parse errors: 'mat-footer-cell' is not a known element: 1. If 'mat-footer-cell' is an Angular component, then verify that it is part of this module. 2. If 'mat-footer-cell' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] Loading data...

[@VIjayKumartheh2o]

Did you resolve above issue, if Yes, please tell me how!!

[@AbhishekKumar-vl3cb]

I'm getting error while ngOnInit(){ this.service.getEmployees(). subscribe... } Error: 'subscribe' doesn't exist on type '(events?: ChildEvent[ ] => Observable......

[@jyotigarg9447]

i want to ask that what have you done with date in my database date column is not visible

[@gurumanchiharishbharadwaj4771]

When I run ng serve -o, I am getting the below error ERROR in node_modules/angularfire2/database/interfaces.d.ts(2,26): error TS2307: Cannot find module 'firebase'. node_modules/angularfire2/firebase.app.module.d.ts(2,79): error TS2307: Cannot find module 'firebase'.

[@nadimalmas2725]

I am getting the error "TypeScript Error: list.map is not a function ". Please help me

[@abhijeetshikharvlog1444]

Why my table data is black background color

[@lts8683]

you have not implemented pagination with server-side

[@bojan705]

Heyy, can i somehow edit the amount of items per page. Say the length of items is 22 and i want each page to show a predetermined number of items (i have a title and sub headers sort of config) with an array ? I've been googling for the past 3 days and have found nothing close to what i need.. :(

[@prasad3673]

sir i am using firebase to store some data, date of birth is one of them but when i retrieve that it shows in seconds ...can you make a video to see proper date

[@souvikpodder7187]

I want to sort my table data based on date and time but the default mat-sorter is not sorting the date. Can you please help me that.

[@CodAffection]

how about this : stackoverflow.com/a/49832720/4133590

[@bottleneck1330]

sir lodash is not working. i'm working with angular9

[@ionictest3320]

how to refresh the dataTable when new data is added to datasource

[@anandhukr1607]

Hi all, I'am using angular7 and material design 8(Is there any problem with versions!), I have an error- Could not find column with id "userId" userId is my field in matColumnDef

[@subrataroy6362]

very helpful...thanks

[@CodAffection]

you are welcome :)

[@xinyi8279]

How do i do all these in Angular 8 instead?

[@DragonsT]

To hear u so difficult, but tutorial is really helpfull

[@CodAffection]

I understand, working on it. thanks for the feedback.

[@johnnyroberto]

excelent. tanks

[@vaibhavjain8461]

nice explanation

[@xenon1666]

getDepartmentName($key){ if($key == "0") return ""; else{ return _.find(this.array, (obj) => {return obj.$key == $key; })['name']; } } //error: Cannot read property 'name' of undefined at DepartmentService.getDepartmentName i am getting the following error.. I have written exact code as of yours.

[@anshumanrout4938]

core.js:15724 ERROR TypeError: Cannot read property 'name' of undefined at DepartmentService.push../src/app/shared/department.service.ts.DepartmentService.getDepartmentName (department.service.ts:31) Hii ,After integrating successfully firebase with angular still I am getting above error frequently while retriving department name from firebase DB .Why it's happening i don't know .In firebase db also i have given 'name' property and there is no spelling mistak.Still this type of error is showing.So please guide me how to resolve this error.I tried everything but unable to resolve.

[@วงศ์ไกรจันทะจิต]

very good leaning bro

[@CodAffection]

welcome. keep learning and sharing.

[@g.m.nazmulhossainsomrat3428]

Really Awesome :)

[@CodAffection]

glad you found this angular material video useful.

[@nisarahmad3370]

The CSS file are empty while downloading the project ...any source code ?

[@tareqelbawab469]

how i can fix this message : RROR TypeError: "lodash__WEBPACK_IMPORTED_MODULE_3__.find(...) is undefined"