Angular Material Table - With Sorting and API Data
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- Learn how to use Angular Material table by building users table with sorting and fetching data from the API. Angular Material Table is a nice approach if you have lots of tables or want to write bare minimum of code.
TIMESTAMPS
0:00 Introduction
1:51 Angular material table installation
2:23 Adding module
5:18 Adding markup for the table
7:51 Rendering rows
10:59 Angular material table data source
22:27 Sorting
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Source code - github.com/monsterlessonsacad...
STUFF I USE
► My imac for home on Amazon - amzn.to/3MgtZAC
► Mac macbook to go on Amazon - amzn.to/3yr3UJg
► My monitors on Amazon - amzn.to/3yw6lKD
► My mouse on Amazon - amzn.to/3CEFCNt
► My keyboard on Amazon - amzn.to/3fOzNVL
► My monitor arm on Amazon - amzn.to/3CHr5BA
► My speakers on Amazon - amzn.to/3T4uf7W
► My coffee machine on Amazon - amzn.to/3rI9DGQ
► My Synology NAS on Amazon - amzn.to/3MjIpQz
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3Cndm1B
► My external SSD drive on Amazon - amzn.to/3rFPQb1
► My external HDD drive on Amazon - amzn.to/3MmrsVE
► My microphone - amzn.to/3SMCE08
► Audio interface - amzn.to/3ecWv9O
► Camera - amzn.to/3RNOLIM
Disclosures: All opinions are my own. Sponsors are acknowledged. Some links in the description are affiliate links that if you click on one of the product links, I’ll receive a commission at no additional cost to you. As an Amazon Associate I earn a small commission from qualifying purchases.
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
Thanks a lot for your contribution for Angular devs. I appreciate a lot, despite that now is big hype for React, you continue create a very useful Angular content.
You are welcome!
Have watched several videos with this Author (name?). This is something real high quality. I am an experienced programmer and have even worked with Angular for some time and still this was very much worth watching. He has a God given talent of making coding videos.
This series should have 1000s of likes.. really amazing well explained . Very well edited everything is not too long and not too short.. It is a real pleasure to watch and learn from. Also by following these videos you pick up good coding practices with an understanding of why!
Wow that's exactly what I was looking for to solve my custom data source problem. It feels like Angular doesn't have good support videos these days. You always seem to have a video to help me fix a problem. Continue the good work!
Thank you!
Thank you for your afford!!! Im learning so much from u. The last thing was about CD Strategy OnPush!!
Thanks for everything you provide to the community ❤
Glad to hear that!
Thank you very much, your video was super helpful and has a great structure to it
Glad it was helpful!
Great.. its worked like a charm.. Thank you so much :)
Welcome 👍
Thanks a lot, so much useful information about mat-table, I appreciate a lot.
Glad it was helpful!
Great video👍 your ways of explaining is awesome 👌
Glad to hear that!
Great Tutorial On a custom data source, helped me solve something at work.
Glad it helped!
Thank you Sir!
You are welcome!
This is awesome. I just learnt alot. Please do you have a video on Material Pagination?
I will add it to the list of future videos
Im trying to implement custom table row of angular material table using ngTemplateOutlet and it is not working, always cant see the columns definition, any advice
I had to create a similar table using mat-table a week ago but could not find a way to use ngFor for the head. Do you think if there is any way ngFor can be utilized effectively in the template?
You can do something like this.
Explendid🎉
Thank you!
thanks
Welcome!
Thanks a lot for great content, it really helps.
I'm currently having a problem in sorting material table.
It is working correctly in the first page but after pagination any other page the data just disappear after click on sorting arrows
Any help would be appreciated
No idea. You need to debug this
This was so helpful, thank you!! Do you have a post or TH-cam video that explains how to use nested Angular Material Data Tables. How do I create a nested mat-table; parent mat-table with one column and each row with a nested child mat-table with three columns?
Hi Gibran, unfortunately I don't have experience with nested mat-table.
@@MonsterlessonsAcademy I understand, thank you for letting me know and for the swift response.
@@MonsterlessonsAcademy I finally figured out 😃
which vs code theme r u using ?
Gruvbox
good content....what IDE are you using ?
It's vim
Please can you do a video on how to export a table in pdf format. both angular material table and custom table
Thank you for the idea
has anyone noticed the subscribe button shine when he said subscribe 18:34
Hi thanks please make it with Filter againts API please
Just build an input outside of table and call a method from dataSource class which will make an api call with provided searchValue. It doesn't have anything to do with material table.
@@MonsterlessonsAcademy I dont get it please please make a video please
I don´t understand why cant we just use the user service to get the data and instead you make a custom data source
To show you the way of creating custom data source for material UI. I showed it with static data from the beginning and you can stick with that if you want.