Using Angular Material Mat Table in Angular | Sort | Pagination | Filter

in this video we'll see how to use angular material table in your angular project so before getting started make sure you have your basic angular project up and running you have installed bootstrap in your angular project because you'll be using bootstrap to design your application and you all you'll also be requiring to install angular material you can refer my previous videos on how to install bootstrap and angular material in your project now once you have these things installed the topics that we'll cover in this video are like how to use angular material table component in your angular project we'll see we will be fetching some data from an api and we will populate the data in the mac angular material table we'll also see how to use matte page native for showing pagination on that angular material table we'll also use mat sort for sorting the table and we'll also see how to filter the content which is inside the table so let's get started so this is the basic angle application that i have at hand and right now so i already have installed bootstrap and angular material in my project so uh i'll start by adding showing you how to add the angular material uh table component here so first we need to uh import the math table in our app.component so i'll just go to my app.com app.module.es file and add the matte table a table mat table module so matte type module you can import from angular material table now once you have imported this thing you just need to go to you just need to there's a certain structure of creating a table in this thing so i'll just refer one of the examples here you can if you go here you can see that we have something called a math table here first we outline a basic container since we already have bootstrap so i'll just create a container inside the container i'll add a table maybe simply copy paste stephen from here as you can see here i'm just copy pasting the table from here just format it okay so now you can see that i'll remove some return quote from here we will start with the basic stuff here so yeah so here you you have a math table we have a normal table where we have added a matte table directory to make it a material table now once you have done that this is the data source that will be binding to the table we'll be fetching the data and set a value to this data source variable now here you can see in ng container it's uh it's a column definition uh that we defined for each of the columns so assuming that we have a table column called ano that indicates maybe a position we can add a header for that thing here in the math header cell similarly we need to define a td also which we can add directly as math cell here it's matte header cell so we define our header here and the math cell value what do we have here so this uh whatever columns we have we'll be defining uh in the displayed columns uh array that we that we need to define inside our component.ps file so and we need to bind it to this t that's a matte header row similarly we also need to define one mat tr with a metro uh directive where we need to define the columns lists also so we'll do one thing we'll just go to our web community as well and define the uh column column names array first let's uh fetch some data so we can see what all data we are getting so here i already have a service file where i'm getting some data from particular url so i'll simply go to this file and use the service and get user data dot subscribe and add response i'll just uh console log the data to see what response i'm getting responses response now before running the code i'll just comment down this code because i might show some errors right now so i saved uh all the files i'll go to my app dot that's fine i'll go to the console here on the console you can see the api response so as you can see we have a set of data uh where we have name username email so we'll do one thing we'll we'll we list out like we will have one column to display the name one column to display the username and one to display the email so i'll go here to myapp.com.ts file and define the stuffs here so this will be name other one will be username and email okay now i'll go to myapp.com.teach file here and then comment the code and in in here the data source variable i'll define here mira ah it will be a math table later source so i need to add negation here okay now i'll do one thing i'll go here and using the data source just our data source we can define a new mat table data source this is how you bind data to your math table inside this you need to pass in the data so if you see here uh we are getting the straightforward data here it's not in some variables so straightforward the array is response so i'll just go in here and i'll bind the response here okay it's uh okay okay we just added it here now i'll go to the combination file here now inside uh this will be name i'll define add a header also for this thing and here also i'll use name and make sure the this column definition name and other names are similar to the one that we have defined inside our displayed columns area otherwise it may not work so i'll i'll copy this thing and replicate it to create one like two more columns here it will be username this will be username this will be email email modify here also username now i'll just save the data now if you see here you should be able to [Music] see the material table now since you already saw how to use mat table in your angle project now let's see how to use pagination this particular map table so we'll see how to use page native component in our angle application before that uh if you saw on the radio database variable we use uh negation negation sign here so if i remove the negation sign uh you'll get an error like uh the property the data source has no initializer and it's not definitely not designed in the constructor so we use a negate sign to remove this error so this error is because of the new typescript version so which requires you to uh define uh variables which requires you to have for each variable to have a default value which you can which you need to set in the constructor or you can provide a negation symbol to let it know that this particular variable will be having some value at runtime that's what we are doing here so that's why i place a negation symbol here now let's see how you can add a matte uh paginator to your to your mat table so uh we just need to add the matte pageonator thing here i'll go to the degenerating component thing here here i'll simply copy paste the page in a test stuff we don't need the whole thing just copy that i place it here now and then we don't require here because we are dynamically adding this thing now this is the page size that we have so i'll set it to page size options uh two five ten hundred that should be good now we also need to add refer this thing so i'll just add a template id to this thing regenerator and i'll use view child in our app.compan.ts file to access that thing view child inside view channel and defend the id page generator here also uh the value will be set at runtime atp okay and here what you can do once the data has been once a data source has been set we need to set the page native value of the data source to our the spationator paginator now if i run the application there's some error okay we need to we need to add the thing to your app.component average module.ts files also mat be generator module that should be good now once you have done that you can go to your application here you can see okay the page generator is not showing up though okay it should be outside your table not inside i'll go to app.compan.html file here just cut this thing put it here now if you see you can see that the pj is getting displayed oh here are the values okay so if i move along you can see the value changes we can also display 25 records in one page also now let's see how you can add a sorting functionality to this math table so for that we'll be using uh sort header component of angular material uh for that first you need to go to your app.module.ts file then you need to add your sort module the mat sort module once you have added the bad sort module uh you need to add a directive to here match sort now once you have the match sort directive added here you need to go to compound.file here and you need to add a virtual reference to matchart inside i'll add matte sort and define a variable math sort much okay now once you have done this uh the place where you are resetting your like or you are setting your data source you can add data dot sort and set it to your math start module to your math sort variable or your med sub virtual component here you know you have set this thing now if you go to html here and here also to show that i can i can relate to my start you need to add matte sort header directive now i'll just save the data i'll go to my sample now here i'll refresh if you can see here on hover you can see the icon i'll increase the number of records now it's unsorted at the initial stage now if i click on this one you can see it's getting started in ascending order c e g and now if i click again it gets sorted in descending order as you can see now if i click it on and again it will be unsorted the default one so this way you can add a match sorter to each of the columns also so now if i add this sort header uh to the username also you can see the sorting stuff there also see if i click here you can click on it to sort by natural particular order and descending order so that's how you can use a match sort modular like a sorted module an angular material table for sorting columns now uh now let's see how you can add a filter to the smart table i'll start by adding some html code to to uh to app.com.html so here as you can see i just added a div and uh mat form field under input for this thing you make sure that you once you have added this thing you go to your app.module.ts file and add a mat form field module and mod matte input module and once you have this thing you can see when you save all these things you should be able to see this a filter text box here it's showing some auto suggestions you can turn it off [Music] just add auto complete off and let's add a key up event also for filtering and we'll call a method called filter data and we'll pass in dollar event okay now you can go to your app.component.ts file and add this method jack [Music] the subscr source that we initialize with the table and all it has a filter thing you just need to pass in the database need to be filtered even dot target dot value that's value the textbook that we enter in there and i'll just save it if i go to the application right now it's displaying like two records let's add uh let's set the default as a bit higher let's have a default s20 or like 25 now if you see you should be able to see all the data there okay now after all data is showing up so let's try filtering so if i type in c e or c l e elemental watch limited if i turn it out and if i let's say okay let's type in k-a-r that's filtering so that's how you use uh filtering stuff or like how you filter data in your angular material table so i hope you find this video useful uh do let me know your thoughts in the comments below thanks for watching

Channel: CodeHandbook

Views: 1,782

Keywords: How to use Angular Material Table in Angular project, How to use Mat Paginator for pagination, How to sort table using Mat Sort, How to filter content inside mat table

Id: lo2-d87oA9w

Length: 16min 9sec (969 seconds)

Published: Thu Oct 07 2021