Angular Material Table Tutorial with API Data - How to Create an Angular Material Table

okay welcome back to another video today we're going to continue with our journey and angular material and i'm going to start this video with showing you my favorite thing in angular material and that is the table component we'll talk about uh you know how we're getting data to the table in this example here and in the future i plan on doing different things to this table like adding pages easily to the table and the user can also select how many rows they want per page that kind of thing but we're just going to show the basic table in this video and also talking about where i'm getting this fake data that i'm using and make it more of like a real world example if you will so this might be a good one for you to follow along and if you don't typically follow along maybe this is the one you do and i already have some of the table created just because it's a lot of in my case i just copy and paste from the material website that angular has but we'll go over what what's going on in the background and uh i think it'll be very useful for you so if you like this kind of stuff don't forget to hit subscribe i just come on here and i share things as i learn them and if that sounds interesting you yeah i really would appreciate it but let's talk about where i'm getting some fake data so maybe i should just show you what i have so far right now i have this table and you can see that i actually do have some data in fact i think there's 200 items that it's showing right here 200 rows and i didn't make this data up this actually came from a fake api on this website right here this jsonplaceholder.typeacode.com and then they have a fake to-do list api which you can query and in this url we are just grabbing every single to-do item we're not filtering so i think i can put a 1 at the end of that url and it'll just return where id equals 1. but if we remove that and just get the to do's it'll give us every single one there's 200 here so actually if i do remember i'll place this url in the description if you want to use this as well which i recommend because likely that's what you're going to be doing in the real world you're going to be clearing some api grabbing that data and making a table out of it and that's what i did here so this is our data and let's refresh if you don't remember how calling web services works in angular so i have this uh service that i created and i called it web dot service and the first thing i did is i created an interface called to do and it holds every single property that each element gives us in um in this json so we have a user id we have an id a title and a completed and if we look that's exactly what my interface is user id id are both numbers and then title and completed are strings and then in the app module i brought in the http client and then i created this method called get to dues and it's going to return an observable of type to do list and it's just going to return a to-do list when it calls this api url which is that to-do's okay so now i can inject this service into in our case my app component typescript and in the constructor and we can reference this get to do's method to grab us that data for this angular material table and if this was really fast and you're still confused i do have a video where we went through the angular tour of heroes tutorial together you can go check out this create a quick api for our angular app or the actual part two both of those should teach you what i basically just glossed over so feel free to go check those out and so if we look at my app component type script i have a property called data and its type is a to do array remember that to do is the interface and right off the bat it's just an empty array and then i also have a property called columns to display and we'll see why that's necessary and right now i just have one column in our table that i want to display and that is the title so like i mentioned before i just injected the web service that i created into the constructor here and into this class and then i call it in the constructor and i say set this data so this equal to whatever this get to do's method returns in the web service then i also display it in the console so if we go and look and i bring up f12 we can see that there's an array of 200 items and as i would expect each one we can expand and show all of those details so that's all the data part and now we can go ahead and look at what does the html actually look like and so a lot of this was actually copy and pasted so not only will i put this json placeholder dot type of code the fake api for you i will also link this table component and angular material and here is where you can grab the templated table html for angular and you can go through and change it as necessary with your data so i was editing this video and i noticed i forgot to mention you do need to bring in the matte table module which you can find in the api tab like we've been doing with the other components on the material website and you also need to add that module to the imports array in order for this to compile and know what that map table is but let's just talk about what each part is doing so we have the overall table and we say this is a material table and we set the data source property with this property binding equal to data which if you remember in the app component it's just a list of to do and then next we want to define how our columns are going to be displayed and so i have an ng container and i give the mat column definition a name and in our case it's going to be the same name and it will have to be the same name as the id of your data so remember title is the id that we're displaying and then i go ahead and i define the header of the column so i'm just going to name this title so if we look at the application this is the column header it just says title and then i'll also define the data of this column and what this part is saying it says let this particular item in this list of data and we're going to call it element so let element and then we're going to display element dot title and after we go through the rows next i'm actually going to go ahead and add another column so we can go through this together just so you get more understanding what's what's going on but at the very bottom of the table we're going to go ahead and define the table rows and here they're asking for okay for the header row which columns are we displaying and that comes from this columns to display list that we defined in our typescript so i named it columns to display and right now we only have one uh element in here but we will add another one and then for the rest of the rows where it's actually showing the data and let's say for each row display it and here's the columns again that we're going to display for the actual data and here this name is completely arbitrary so if i just name this row let row and i saved it it'll compile and then if we go back you can see it still shows the same data basically we just have to say we want to show every single row in that data collection and that list of data so that might have been confusing and what i want to do in this video is to expand upon this and i want to show another piece or maybe multiple pieces of this data besides just the title so maybe we also want to show the id so we'll start with that and maybe add more from there if we decide that's necessary so i'm just going to copy this whole definition for the title and i'm going to put it in front of the title for the id so the mac column definition i'm just going to name id because that is the the name or the the key i guess so id and then this is what the header is going to read so instead of title we want it to read id and then let element that's going to be this is going to be the same as it was for the title so we're just going to grab that particular element in the list instead of showing element.title we're going to show element dot id and so i'll save but if we look it will not show up fully you might be asking why is that that's because we didn't add id to the columns to display so it's still continuing to display only the columns that are in this list and notice that even if we define this this column here it doesn't matter as long as it's not in this columns to display so maybe you can go ahead and define every single column and then this can be dynamic to what columns you want to display and add to that list or remove from that list as you need to but i want to add id to that columns to display so we'll add to this list and then we'll add id so i'll compile again and now if i pull it up it should show you both and notice that columns to display is actually also how it is arranged so title was first in that list and then id was second so maybe i want id to be in front so i'm actually going to cut that and put it in front of title and now we don't need this comma back here anymore so i'll save that compile it and now id will be in front of title so lastly let's add one more column just to make sure you guys uh hopefully are understanding what i'm doing you know once you make one definition for the column it's pretty easy to continue to add more so let's go ahead and add completed next and since we're already here i'll just put completed in this columns to display list and once again that'll be the only thing i'm changing in the typescript now let's go back and let's copy one of these definitions so i'll just put it right here and then the column def is going to be completed okay and the header is going to say completed and element.title is going to be element dot completed and we'll save and let's go look at our table at the very end it should say completed true or false so if you think about the alternative what would the alternative be to using the material table it would be creating a table in html and each row would be a ng 4 directive and you would have to go through all of this these different steps or you could easily just use one of these angular material tables and do it this way which i think is a lot more dynamic and in the future i want to show you okay well this is a lot of data for one page what if we want to split it up in pages of 10 or 20 or 50 and we can go to the bottom and choose which page we're looking at so that'll be in the next video hopefully you're looking forward to that um and thanks for watching really do appreciate it hope to see you in the next one

Channel: Coding Under Pressure

Views: 1,401

Keywords: Angular Material Table Tutorial, Angular Material how to, angular table with data, angular material table with api data, table with data, angular table component

Id: viIxYWO1g6k

Length: 11min 54sec (714 seconds)

Published: Sat Sep 25 2021