I subscribed to Angular - The Complete Guide 2020 years ago when it was Angular 2. It's wonderful that you keep it current and available to all for the original modest fee. Probably the best value in the Angular training market. Would love if you would consider enhancing this example to allow and persist changes to values in the table.
I'm so lost. Just as i thought im getting it, Angular did the usual, went from 101 to IMPOSSIBLE AF. I'm just gonna do what everybody does, copy and paste and hope it works.
If you get Cannot read property 'data' of undefined error in this example change to: ngOnInit() { this.dataSource = new DataTableDataSource(this.paginator, this.sort); } in data-table.component.ts file
I used mat data table with pagination and sorting included. My data is coming from the backend. I make this request to the backend inside DataSource class. For some reason, the data i'm retrieving isn't being loaded immediately on the table. I'm having to go to another page and then coming back to this page for the data to be reflected on my table. Any fixes?
Hi Akshay, I am stuck with same issue. Data doesn't load first time. Only when i click pagination arrows/page number dropdown, i see data. you got any solution? Thanks.
Hello Max. I follow your udemy course but haven't found the chapter about tables yet. I'm using this approach and it's working fine except for one detail: I have a function that updates my dataSource, but when I call it the rows don't render unless I click on a header to sort or change the number of items per page in the paginator, then they appear fine. Any ideas on why this could be happening and how to fix it, anyone? The only thing that updates instantly is the paginator "1 - 7 of 7".
As a beginner in Angular, I went through hell with material data table. I was not used to using ngOnInit and kept initializing stuff in the constructor. I am enjoying angular now though.
Customer insists on Material Table by weekend - oh no but then along comes Max - Thanks for another super tutorial. It is actually easy once explained by you but tend to agree that somehow Angular has a way of making simple things look complicated.
Thank you for the video. Please does anyoone know how to add data to a mat-table from a modal. It only works when it's not a modal but when I use a modal to add data to my table, it shows in the console but not on the UI
- I want to pick and sum any column in a data table and value to be displayed in my form. Is it possible? - Also need a search feature that search every rows and columns of the data table.
thanks for the detailed review of the tables. I was given a test task to display a list of continents and countries in a table in angular and apollo. Can I implement this solution with tables? And how do I display the data from the graphl playground to the angular table. If you can advise me something, I will be very grateful. Thanks
i'm getting this error after running the generate command The class 'MatFormField' is listed in the declarations of the NgModule 'MatFormFieldModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
thanks sir for this tutorial. when items per page selected for >25 items, you must scroll down to see paginator, if you scroll down, you can't see table header, right? and if you make a button add too or something like that on the top page you must scroll up again to see button. my questions for you sir, how to make it simple access between paginator and button? or between paginator and table header? how to disable page scrolling, and enable it for list of data table? i'm a begginer of angular app or web proogramming sir.
Quick question can ngx-datatable and material libraries mix? I am a back end developer and my team just got out GUI member. I still want to know what is going on and learn more. Thanks to whoever answer
Hi Max. I am looking for a component / grid / table that I can use for my ionic project. The component must be able to have checkbox select in each row, column sorting, row styling based on one of the column values. Also must have pagination. The application will be used on desktop, tablets and mobile devices. Can you please advise what grid / data table components I can consider. I have recently completed your udemy ionic course, but the ion grid was not covered in this detail, so I am not sure if I can user the ion grid for all this, or if I need to consider another angular component.
Nice Tuto, I currently use this, but when I make 'ng test', I get the error: 'TypeError: Cannot read property 'sortChange' of undefined'. Could you help me to understand and fix this errors? Thanks.
Well explanation... It's possibile try to transform a data table component in one slider component? I think to use pagination at 1item and complex data to use in a cell... Would be a good exercise
Nice Tutorial. Could you please upload the video with loading own json data from a service into the datatable? I have been stuck on the issue 'Error trying to diff '[object Object]'. Only arrays and iterables are allowed' since very long while trying to load my json data into the table. I tried passing the data in Array format as well. But no luck. Thanks
Thanks you very much for this Video Max. I was personally already using the Mat Table but I like your approach to it with the shematic. It makes it a lil more cleaner that way! I'll keep that in mind for my next project :D Cheers, keep up the great videos!
Can someone explain my why my pagination has no animation? It just changes the table page, no hover no thing. Also, the number of entries dropdown does not work, just opens down and looks really ugly. I don't understand why
Can anyone help me??? Api call--- On default date range sort and pagination is working fine but, After filter date range My sorting and pagination is not working...
I am getting error "provided data source did not match an array observable or datasource". When I console.log(data) it shows data is within some object ------> { statusCode:200, errorMsg:'No response', exception: 'No response', response: Array(682), successMsg: 'success'} If I toggle that arrow next to "response" that is where my entire array is that I want to store in dataSource. Can someone please assist? I tried to write [dataSource] = "users.response". but not working.
hey max..i am following this tutorial of yours and was able to implement everything successfully. What i want now is to display json data returned from a service dynamically into this data table instead of hard coding it...how do i do that??
@@Kevinproducciones2 The problem I found was that its designed to do a specific set of tasks really well, and if you tried doing something outside that scope, then you are out of luck
Hey guys. I’m using mat-table (witch from my point of view it’s an awesome material angular component) and I’m having some performance problems when I’m trying to show 1000 rows or more. I’m talking about the [pageSize] array. Does anyone face this problem as well!?? Thank you all.
It should be - ng generate @angular/material:material-table --name=app-data-table because - An unhandled exception occurred: Could not find module "@angular-material"
Hello I'm new in it maybe anyone of you has some tutorials of get request with parameters such as pagination and user name, for now i have written webapi + asp.net core backend and this is fully work, but i don't know how to link it to angular frontend
Hello Sir being your student at Udemy I face this error on ng generate @angular/material: table tablename ng generate @angular/material: table tablename The 'path' option in 'D:\material_angular ode_modules\@angular\material\schematics g-generate avigation\schema.json' is using deprecated behaviour. 'workingDirectory' smart default provider should be used instead. (0 , validation_1.validateName) is not a function
im having trouble linking my datasource to my existing clientside data, stored as an observable in my service. I assume i need to subsrcribe to the observable on init but i dont know how to define the data type and where to subscrible in the table-datasource.ts. Anyone can help?
Wow, 4+ years old video, still super helpful !! Amazing as always Max!
All of us are grateful for your timeless teaching... 👍
the syntax is no longer valid. check the altest schematics spec for help.
ng generate @angular/material:table
Wenn ich ein Problem habe und ein Tutorial von dir finde, ist mein Tag gerettet :) Super Kurse, super erklärt, einfach toll!
Es freut mich wirklich sehr, dass dir meine Videos gefallen Anne, vielen Dank für dein super Feedback :)
I enjoyed the explanations and I'm happy that I'm not alone in thinking that Angular does things in a very obtuse way.
after 24 hours of searching answers, I found you and omg thank you sooo much you saved my life !!!
I subscribed to Angular - The Complete Guide 2020 years ago when it was Angular 2. It's wonderful that you keep it current and available to all for the original modest fee. Probably the best value in the Angular training market. Would love if you would consider enhancing this example to allow and persist changes to values in the table.
updated CLI command ==> `ng generate @angular/material:table your-table`
I'm so lost. Just as i thought im getting it, Angular did the usual, went from 101 to IMPOSSIBLE AF. I'm just gonna do what everybody does, copy and paste and hope it works.
There is now a MatTableDataSource class. Could you explain how this would integrate with this boilerplate?
If you get Cannot read property 'data' of undefined error in this example change to: ngOnInit() {
this.dataSource = new DataTableDataSource(this.paginator, this.sort);
} in data-table.component.ts file
I used mat data table with pagination and sorting included.
My data is coming from the backend. I make this request to the backend inside DataSource class.
For some reason, the data i'm retrieving isn't being loaded immediately on the table. I'm having to go to another page and then coming back to this page for the data to be reflected on my table. Any fixes?
Hi Akshay, I am stuck with same issue. Data doesn't load first time. Only when i click pagination arrows/page number dropdown, i see data. you got any solution? Thanks.
i have the same problem. did you got a solution?
@@vctdiniz Hello guys, I think i just used a resolver to load the data first and then render the said page. All the best.
You are the best I have also bought many of your courses on Udemy! Content is Very Nice and also updating every year Kudos!!!
Hello Max. I follow your udemy course but haven't found the chapter about tables yet.
I'm using this approach and it's working fine except for one detail: I have a function that updates my dataSource, but when I call it the rows don't render unless I click on a header to sort or change the number of items per page in the paginator, then they appear fine. Any ideas on why this could be happening and how to fix it, anyone? The only thing that updates instantly is the paginator "1 - 7 of 7".
great video, do you have another one where you link the data to a HttpClient?
Did you find one?
@@Steffi5376 yes, his courses in Udemy
Is it necessary to create a new component for the data-table?
sir superb, you are only one who cleared this topic to me
Can u upload video of How to fetch data from api to this mat table
at 4:29 I dont have the content of line 2 where it has the [datasource] keyword. Whats going on?
if you are in angular 14 use this to generate the table ng generate @angular/material:table component-name
Great video! Do you have a video on the best way to hook the Angular Material table up to a remote data source?
As a beginner in Angular, I went through hell with material data table. I was not used to using ngOnInit and kept initializing stuff in the constructor. I am enjoying angular now though.
Customer insists on Material Table by weekend - oh no but then along comes Max - Thanks for another super tutorial. It is actually easy once explained by you but tend to agree that somehow Angular has a way of making simple things look complicated.
How to send / join data form external data from Api?
is it Possible to display live websocket values inside a mat table ?
Could you show us how to do a full CRUD material table please? AKA delete, edit buttons on the table itself, etc...
Hi could you please make a video tutorial how to implement complex datatable plugin with individual column searching?
Max you're the best, you are a devs factory!!
Thank you for the video. Please does anyoone know how to add data to a mat-table from a modal. It only works when it's not a modal but when I use a modal to add data to my table, it shows in the console but not on the UI
Could you do a series in angular cdk? I'm particularly interested in the lower level libs like scrollabale and a11y
Thanks for this tutorial. Have any idea how to add CRUD into this? I wish to give it a function that lets users add their own input into the table.
I finally understood it!!! thanks man, btw, is there a way to display each column dynamically?? with an ngFor for example?
- I want to pick and sum any column in a data table and value to be displayed in my form. Is it possible?
- Also need a search feature that search every rows and columns of the data table.
Hi Max,
how to refresh the dataTable when new data is added to datasource
is there a way to insert data in the table?
thanks for the detailed review of the tables. I was given a test task to display a list of continents and countries in a table in angular and apollo. Can I implement this solution with tables? And how do I display the data from the graphl playground to the angular table. If you can advise me something, I will be very grateful. Thanks
Hey Alex, is it possible to use virtual scrolling to prevent performance issues? Thanks a lot.
Best regards Alex
please explain how to retrieve json data into this datatable
Are you able to do it now ?
thanks man! So happy that I found your channel!
Thank you Kirill, happy to have you on board!
Great tut. Can you provide some sort of solution for responsive hiding columns?
A good lesson.
How to configure pagination when data comes from the REST Server, how to send a request to the server to get the next piece of data?
Name
Email
Age
City
{{item.name}}
{{item.email}}
{{item.age}}
{{item.city | uppercase}}
@@omargonzalez-yh7gg Right. But this is a Material tutorial.
what can we do to stack the data table of angular material to get better responsiveness ?
How to display nested JSON data in Angular material table?
Can you tell me how to create a coloured table or heatmap in angular
How can we add scroll bar in mat table
How to change the color of the sort header in the DataTable ??
Love the mentor. Really nice and incredible explanation
is there any way to transpose the angular-material data table ?
How to keep header row stick at top
Ahh! Max! the best angular-tut guy!
How to implement filtering using this code. Couldn't find a way.
i'm getting this error after running the generate command
The class 'MatFormField' is listed in the declarations of the NgModule 'MatFormFieldModule', but is not a directive, a component, or a pipe.
Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
thanks sir for this tutorial. when items per page selected for >25 items, you must scroll down to see paginator, if you scroll down, you can't see table header, right? and if you make a button add too or something like that on the top page you must scroll up again to see button. my questions for you sir, how to make it simple access between paginator and button? or between paginator and table header? how to disable page scrolling, and enable it for list of data table? i'm a begginer of angular app or web proogramming sir.
Quick question can ngx-datatable and material libraries mix? I am a back end developer and my team just got out GUI member. I still want to know what is going on and learn more. Thanks to whoever answer
can you please tell me ho to compare selected option to right answer in quiz app
Hi Max. I am looking for a component / grid / table that I can use for my ionic project. The component must be able to have checkbox select in each row, column sorting, row styling based on one of the column values. Also must have pagination. The application will be used on desktop, tablets and mobile devices. Can you please advise what grid / data table components I can consider. I have recently completed your udemy ionic course, but the ion grid was not covered in this detail, so I am not sure if I can user the ion grid for all this, or if I need to consider another angular component.
how to push a static row to angular material table? please help
how to add go to page input in that table? user can jump to desired page
Nice Tuto, I currently use this, but when I make 'ng test', I get the error: 'TypeError: Cannot read property 'sortChange' of undefined'. Could you help me to understand and fix this errors? Thanks.
Thanks @@aletsl . 'MatSortModule' is already added in my app.module.ts, but i get the same error.
I need help in angular datatable with custom Filters, please suggest if I can build the same using concept used for sorting and paging here.
thank you for all great content! can you please explain how can i print mat-table that will be display normal?
Can you do one video where you add the edit button to each row of this table and you make a database your dataSource?
Am unable to get the same styling as you did may I know why
you are a great instructor of me.
how can add first row input elements ? i want to first row id input name input last name input then add button how can i add
Well explanation... It's possibile try to transform a data table component in one slider component? I think to use pagination at 1item and complex data to use in a cell... Would be a good exercise
can we get onclick single row ID
Nice Tutorial. Could you please upload the video with loading own json data from a service into the datatable? I have been stuck on the issue 'Error trying to diff '[object Object]'. Only arrays and iterables are allowed' since very long while trying to load my json data into the table. I tried passing the data in Array format as well. But no luck.
Thanks
I'm having the same exact issue, did you find the solution for it?
Thanks you very much for this Video Max. I was personally already using the Mat Table but I like your approach to it with the shematic. It makes it a lil more cleaner that way! I'll keep that in mind for my next project :D
Cheers, keep up the great videos!
Thanks a lot, it makes me happy to read that you liked the video and my approach :)
Can someone explain my why my pagination has no animation? It just changes the table page, no hover no thing. Also, the number of entries dropdown does not work, just opens down and looks really ugly. I don't understand why
i want to show table when i click on navigation menu...how to do this
Awesome explanations! Thank u dear.
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
How to add new raw without loading page?
how do i create the datasource interface when im getting the table data from a service?
Did you find any solution to it? I'm having the same issue here
Can anyone help me???
Api call---
On default date range sort and pagination is working fine but,
After filter date range
My sorting and pagination is not working...
How can display data from firestore in Datatable
I am getting error "provided data source did not match an array observable or datasource". When I console.log(data) it shows data is within some object ------>
{ statusCode:200, errorMsg:'No response', exception: 'No response', response: Array(682), successMsg: 'success'}
If I toggle that arrow next to "response" that is where my entire array is that I want to store in dataSource. Can someone please assist? I tried to write [dataSource] = "users.response". but not working.
Amazing as always
plz exxpain about how to get data from angular to website
how to i follow to tutorial in WebStorm? command ng does not work
Thank you very much max sir. Your videos are as great as ever. Thank you so much.
Can any one explain the difference in mat-table and cdk-table.
how to refresh the dataTable when new data is added to datasource.
hey max..i am following this tutorial of yours and was able to implement everything successfully. What i want now is to display json data returned from a service dynamically into this data table instead of hard coding it...how do i do that??
codingthesmartway.com/angular-material-part-4-data-table/ Follow this URL You can see how to get data from REST API. Very simple explanation
Please make videos on Ag-grid angular
Could you please make a video showing how to hook up the data from an API?
You can check some of my older Angular videos on this channel - I do make some Http requests in some of these videos :)
@@academind please share Http Request Table data
You are awesome buddy ... Good learning with every video
YOU are awesome Sagar, happy to read that my videos are helpful for you!
Hi Max when I put into main.html
I get a blank screen can you assist please. Anyway great tutorial
Try to put the code in app.component.html instead
I think Angular Material is just too complicated. Thanks for explaining it though
it's really not tho. Imagine if we didn't have any 3rd party API libraries
Is angular material better than ngx data table?
@@Steffi5376 No idea. I haven't touched Angular since I posted that comment
@Michael Wanyoike You didn't like it 😂
@@Kevinproducciones2 The problem I found was that its designed to do a specific set of tasks really well, and if you tried doing something outside that scope, then you are out of luck
Hey guys.
I’m using mat-table (witch from my point of view it’s an awesome material angular component) and I’m having some performance problems when I’m trying to show 1000 rows or more.
I’m talking about the [pageSize] array.
Does anyone face this problem as well!??
Thank you all.
Since I am an angular developer how I can develop native app ??
Ionic 3 ionic native or ionic capacitor?
both. Ionic currently uses cordova to perform native functions. Capacitor is a recent version that will also work on PWA.
It should be - ng generate @angular/material:material-table --name=app-data-table
because - An unhandled exception occurred: Could not find module "@angular-material"
try this: ng generate @angular/material:table
Is it possible to edit the table tho? 🧐
Hello I'm new in it maybe anyone of you has some tutorials of get request with parameters such as pagination and user name, for now i have written webapi + asp.net core backend and this is fully work, but i don't know how to link it to angular frontend
Exactly what i will need tomorrow!! Thx!!!!!
Happy to read that the video came at the right point in time :)
Collection "@angular/material" cannot be resolved.
But it is installed, locally and globaly. Any Idea why?
npm -v => 6.0.0
It is only from @angular/cli v6 i guess... :(
Hello Sir being your student at Udemy I face this error
on ng generate @angular/material: table tablename
ng generate @angular/material: table tablename
The 'path' option in 'D:\material_angular
ode_modules\@angular\material\schematics
g-generate
avigation\schema.json' is using deprecated behaviour. 'workingDirectory' smart default provider should be used instead.
(0 , validation_1.validateName) is not a function
Thousands prayer for you!
im having trouble linking my datasource to my existing clientside data, stored as an observable in my service. I assume i need to subsrcribe to the observable on init but i dont know how to define the data type and where to subscrible in the table-datasource.ts. Anyone can help?
I'm having the same exact issue, did you find the solution for it?
yessa but, where is a button primary to look nice?
This was really good but it's a little out of date now. I hope you will release an updated version soon.
Hands down. Great explaination.
Thanks a lot for your great feedback Rattanak!