Angular Material Data Table - Paging, Sorting and Filter Operation

what's up YouTube welcome to quarter fraction this is my third video in the series of angular material tutorial in previous tutorial we have designed a form containing almost all frequently used components and we have implemented firebase cut operation as a result of that we are able to insert few employees inside this employees collection in firebase dB now in this video we are going to list all of these employees in angular material data table so here we have the overview of summary of this video tutorial it will list all of the employees collection inside this angular material we will discuss the mandatory features of a data table like sorting then paging and filtering all of them are discussed in this video tutorial so please watch till the end of this video tutorial quickly let me show you the demo of next video tutorial in which we mainly focus on pop-up or pop-up dialog in angular material for both insert and update operation we open the forms in a pop-up dialog when we submit the form we will automatically close the pop-up dialog we have customized this pop-up to some extent so that we have a close button at the top right corner finally we will wind up the quiet operations by deleting an existing employee before starting this video I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please be subscribe to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well so here we have the same project from previous tutorial we will start with creating new component employee list inside that we will deal with list of employees you have to create that component as a child component for this employees component so here we have opened the terminal now let's run the ng command g4 generate c4 component we have to create that component inside employees folder component name will be employee - list hip endo so here we have the newly created component employee list now inside this new component employee lists we have to retrieve all the inserted employees from this firebase collection here in order to retrieve these records we have already written a function inside the service class here employee service so here is the function get employees now we just need to call this function from this component here so that we can do inside this ng on it lifecycle hook before that we have to inject this employee service class inside the component so I will create an object of the employee service inside this constructor here now let's add the import statement for this service class for that you can use this shortcut here hold ctrl then press P reach now place the cursor on the service class hold ctrl then press period then select the appropriate impo statement so here it is now inside the ng on a lifecycle hook we can call the function get employees so here we go we will call the get employees function it will return an observable so we can subscribe to that absorber here now inside the SUBSCRIBE function we have to convert that angular file is into an array exactly similar procedure is done in previous tutorial for Department so here is the procedure okay so same can be done for this employees collection also so here we have the callback function with a single parameter list inside that began do this we will have the array variable and we will do this we will call the map function from this list parameter and inside that we will have another callback function with single parameter item inside the function we will return an object containing employees details so for that we will do this so this function item dot bell or dot Val will return an object containing these much employees duties also we have used three dot D structure in syntax from JavaScript so all of the properties from this object can be a part of this new object here now along with these properties we have to have this primary key or dollar key so we can do this we have added that dollar key from this object item dot key finally inside this array property we have a list of employees now let's look how we can show this array in angular material data table for that let's have a look in our documentation angular material then go to components here we have data table click on table so here we have the basic usage of angular material table of course it is a big component compared to components that we have discussed so far first of all let's add the required module it will be mad double module so back to the project then add the corresponding import statement inside the material module so let's add the parent module which is mat table module inside these two arrays imports and exports instead of rendering the tab using this array property here we convert that into another object of the type mat double data source which is another class from the mat tablet module now I will define a property of the type here list data which is of the type mat double datasource now we just need to do this we will convert the array into live that our object now we can use this list data to render the data travel before that I will define an array like this display columns which is of the type string array and I will initialize that array with a single item which is full name means inside this area we will name each columns that we have to show in our angular material data table first of all I will show you how to display a full name inside the table and then we will show the rest of the columns sorry we have to move this initialization after the map function so I will do this now open component HTML employee this component HTML here instead of this default paragraph I will add a div with class mat innovation is that H which is a class defined in angular material inside that we can add the mat table like this inside that we can add the math double like this now we can set the data source that we have initialized inside this ng on in lifecycle hook list data so we can do this data source is equal to this data now we have to define template for tabla header and body for that we can do this we will add these two tags here I will define what they means actually so this is for the header template we will use this tag mat had ro and for the element we have applied this derivative here Matt had wrote F actually it will applies the templates of header row by header row we mean by this part here row which contains the column header into that directory we have passed the string array containing full name only we can discuss the use of this array later below that we have this mat draw element same as the header row directive we have another directive here mat draw def which captures or applies characteristics of table body inside that we have passed these are displayed columns like we have done in header row along with that we have this variable row which is used for the creation or rendering of the table bori so here we have defined templates for header and MODY of the tablet now we have to define template for each cell in both header and body of the tablet for that we can do this we have ng container inside that first of all we will have this directive mat column def which is equal to full name with this directive we have named the column as full name this column name full name should be the inside this array here display columns so we have the column full name okay inside that first of all we have the template for the header cell that means we have defined this part here we had the cell like we have shown here we have this element mat had a cell in order to apply characteristics of header cell we will apply this directive here Matt had a cell death now let's define the template for body cell or cell which contains the actual data for that we'll use this element here mat cell in order to apply characteristics of the data cell I will apply this directly here Matt cell def and which is said to this expression let element that means when angular material render this man table it will do in the nitration based on the data collection that we have provided here on each iteration from this collection list data inside this element we will have an object containing current row that I can show you here for that I will use the string in the operation element and we have to convert that into a Jason so I will use this Jason pipe here now let me save all of these modifications here I have already running this application in my browser but still in our parent component we are running employee component instead of that we to replace that with employee list component use employee list component save then back to the application here we have an angular material tab containing one column full name inside the body we have shown a decent object representing current raw data instead of the complete object we need free name only dot full name save then back to the application that's it now we have to do the same for rest of the columns now we understood how we can define template for both body and header now let's define template for remaining columns so first of all we have the email then we have mobile and City Save then back to the application here it looks same as before can you guess where we went wrong yes it is related to the array which we have defined here displayed columns inside that we have to define these column names email mobile and city currently it contains only one item which is fully so I will add the column name for those columns then save back to the application so with this array itself display columns we can change the appearance of the table means we have already defined template for these four columns inside these four ng container here in order to hide any of these columns you just need to remove that column name from here and save back to the application here we go we have only three columns full name mobile and city now if you want to change the order of column inside this table you just need to change the order of item inside this array see so here we have email as the first column saved then back to the application so here we have email as the first column you don't have to change the order of ng container inside this HTML it would be more difficult than doing here okay so I hope you have understood the template in angular material now along with these normal columns here I want to show an extra column which is for actions like edit and delete operations so I will add the corresponding ng container here in T container and we have the corresponding column name as actions here we have the header cell template for this column header cell will be empty and here we have the definition for body cell inside the cell we have two buttons one for edit operation and one for delete operation inside these buttons we have want material icon in order to walk this material icon we have to add the corresponding CSS style sheet which we have already done in our first video inside this index dot HTML so here it is along with that we have to add the corresponding module which you can see inside the documentation go to components then under buttons and indicators you can see icon then let's grab this module here mat icon module now open material module type script file then add that module here so here it is mat I can module inside both of these arrays let me save all of these modifications then back to the application here again we forgot to add the corresponding column name inside the array which is actions save then back to the application so here we go we have two cute buttons here we will implement their functions in next video now we have to add some processing or metadata information about the table like when there is no employee in the employees collection we have to show no data and during the initial rendering of the tablet we will have a delay because of the delay in fetching the collection from firebase DB during that time we have to show loading data you can see the initial delay here let me reload this page we have a short delay before displaying the tablet first of all I will show you how to display an indication while fetching data from firebase dB for that we will add this footer element here mat footer row now let's add the definition directive which is mat footer row def which is said to an array containing an element loading so we have to define an NG container with column name loading since we have defined this element as photo this element will be shown in footer of the table so here we go ng container here we have set the column name as loading inside then we can see this element mat photocell we have set the call span to six inside that will be sure this message loading data that we save this then back to the application here now you can see the footer loading data always this photo will be there that's not what we want we have to hide that photo after rendering this complete table for that we will add a CSS class into this photo using a condition so here it is we have used this ng class directive inside that we will applies this CSS class when list data is not empty means we have retrieved items from firebase DB means when we first data us into this rich data object inside this ng container we will apply this height class into the photo so that we can hide this element here now we have to define this class inside stylesheet' here Stiles door CSS here we have this year's rule for height class we have added this photo CSS ties in order to position them in sender let me save all of these modifications here then back to the application so here it is and it is gone after rendering the complete tablet now let's look how we can show no data when there is no item in the firebase DB collection so back to the component HTML we have to add one more photo so here it is mat footer row now we have to add the corresponding ng container here it is exactly similar to the previous one except the column name no data and message inside that and let me save this back to the application you can see the no data message always though for this footer row also we have to apply the CSS class hide accordingly so back to the HTML so here is the ng class directive ng class we will apply this hi based on this expression here so we will apply this class hide when this list data is retrieved means we have executed this function get employees but there was no record means this list data is not null but it is an empty collection for more clarity you can say number of a course inside the collection if 0 so this condition here is just opposite to the situation that I have just described here means we have to negate this condition here so I will enclose these conditions inside a pair of brackets and I will apply the negation operator exclamation mark now in order to demonstrate this situation we can't use this firebase DB collection employees because it already contains some records and you can see here if i refresh this double you can't see that message no data in order to show that I will change the firebase DB collection in sigh the service cross here I will add some extra characters here you don't have a collection with this name so there is no data now back to the application we have the message no data if you refresh the page you can see for so for we have loading data it will be displayed while retrieving the data after the execution of the get employees function here we have no data inside the collection now let me change the collection name back to the original employees save back to the application that's it now inside this angular material tab we will implement paging and sorting corresponding documentation can be seen here along with this tab we have a page inator and sort head it's not that difficult so back to the application first we have to import cast bonding modules inside this file here paginated module and sort module you have to add the same inside the exports array also then back to the component HTML here first of all let's implement sorting for that we have to add this maths or directive into the math table here so here it is mat sort and then we have to apply math sort header detective to those mat header cell which is to be sorted so here it is mad sort header I will add these two remaining columns also email then mobile and city now we have to configure that inside this typescript file also first of all we will create the properties sort using view child decorator so here it is in order to use this view channel we have to import that along with this component and on in it also we have to import Matt's on so this view child decorator will look for the detective math sort inside this HTML here so that we can link this property to this data source property here so sorting will be easier now in order to configure this data source for sorting we just need to do this it will set sort property of this data source as this dot sort property now let me save all of these modifications here then back to the application something went wrong let me check the HTML here we have applied maths or then match sort header four remaining columns full name email mobile and city yes we have to apply this format header cell like we have done before cut and paste same here also save then back to the application that's it we are able to sort the tablet based on these columns here in both ascending and descending order now we have to implement paging inside this angular material data tab for that we have already imported corresponding module inside this typescript file here which is mad pigeon ate module now back to the component HTML file here in order to implement paging for a table we need some controls like we have done inside this documentation here here we have a drop-down to change the size of a single page and we have few buttons here in order to change the current page inside that we have to add and configure required controls so first of all I will add an array which determines the current size of the page so here it is page size options inside that we have five 10:25 and handle so these items will be populated inside the drop-down and then we will initialize the page size as 5 so initially page size will be 5 so in a single page there will be only 5 employees now we have to configure this page later inside the component type script file here like we have done for sorting with the help of you child we will create another property page inator now we have to import this class mat page Neto along with this math sort now we have to configure this list data for paging for that we can do this paginated property of list data is said to this paginated property now let me save all of these modifications here then back to the application here we go currently page size is 5 so we have 5 employer of course inside this page you can change the current page using this next and previous page button here if you want to increase the page size you can set it as 10 here along with this previous and next page button we can add two more buttons for navigating last and post page directly for that we just need to do this along with this page size we have to add this derivative here so force last buttons save then back to the application here that's it now let's discuss filter operation for filter operation we don't have to import some modules inside the project but it's not that easy like we have done for sorting and page we need an extra form containing a textbox to end our search keywords so back to the component HTML here just about the math table view I will add another div 44 so here it is with class search do inside that first of all I will add button when we click on this button we will open employee form in pop-up window to insert new employees that can be done in next video now just after this button we will have the form for text box so here it is mat form field and here we have a custom class search-form field inside that we have the text box which is displayed using two-way data-binding so here we have ng model we have binded that to property search key which is to be defined inside the tab script file and we have said placeholder as search' autocomplete as off so that we don't have any prediction for this text box just after this text box we need a clear button so here it is so this is an icon button so we have these two directives your mat button and mat icon button and with this mat suffix directive this button will be set as a suffix for this text box here similar example can be seen inside the documentation here here we are inside the input control let's go through examples so here it is okay this clear button is a suffix for this text box here in order to work this two-way data-binding we have to create this search key property inside the typescript file here search key which is of the type string also in order to work this two-way data-binding we have to import forms module inside the parent module which is app module dot ts file so I will import forms module along with this reactive forms module class we have to add this inside this imports are here let me add few CSS rules for these custom classes here search du and search form field let me open the stance sheet stands diseases so here we have added few CSS rules for filter controls let me save all of these modifications here then back to the application so here we have added search controls when we focus into this text box here this placeholder is floatie we don't need this floating so in order to avoid that we can set this property here float level is equal to now save then back to the application here we have the Clear button we only want to show this button when this text box is not empty for that I'm going to add ng-if directive here ng-if is equal to search key save then back to the application that's it initially we don't have a reset button here if I enter something inside this we have the reset button now let's add a click event for this button so here it is we will we will call this function on search clear now we have to define this function inside this typescript file here function will be as simple as this this dot search key is equal to empty string when we enter something inside the search box we have to filter employee records from this table based on the keyword entered here for that we will add a key up even for the textbox here so here it is key up we will call the function apply filter so here we have the function definition we just need to do this from the math table data source object list data filter property is equal to this dot search key door trim to lower case that means we will remove space Y space from both ends and we will convert that string into lower case so this assign operation will filter a course from the angular material table based on the entered search key in the text box now we have to call this same function inside this clear function also this dot apply filter save all of these modifications then back to the application here let me try some keyword so here it is we have an employee with named Cedric is filtered if you want to clear this result just click on this Clear button here so far we have discussed how to display a list of collection in angular material data table and then we have implemented filter sorting and paging in angular material but I can stop this tutorial here because some of you will ask how we can show department name inside this tab we can show Department key because it is in the same collection employees but department name is in another collection departments if we were using relational database like SQL Server and MySQL we can directly execute a query with join operation but it's not that easy with no SQL database like firebase so I will use a different approach inside this department service here we have already retrieved all the records from department collection so I will define a separate function here into that function we can pass the department key and we will return the corresponding department name in order to do this filter operation inside this array I'm going to install a new handy and PM package which is low - so for there let me open one more terminal here NPM install then double dash is low - hit enter installation is successful so we have to import the module here we have important low - and we have said this alias underscore here now let's define the function get department name with a single parameter dollar key first of all we will check whether the key is zero or not department key will be zero when there is no department selector while inserting new employee otherwise we have else cross inside that we will do this recall the fine function from law - and first parameter will be this array itself inside that we have already retrieved all the departments as a second parameter we have to pass a function which describes the condition for searching error code so here it is so here we have the error function with single parameter obj inside the function here we have the condition so with this function call here it will return all departments with matching key with this key parameter here so it will have these much properties code and name from that we need this department name so we can do this it will retrieve department name now we have the function ready now what do we call this function in order to show Department name inside this tablet we have created this array inside the employee list component here inside the ng on it lifecycle hook so here itself we have to add the department name so inside this map function we have a callback function here with single parameter item which is hydrating through the each collection of employees so here we can call the function so first of all we have to inject the service inside this constructor now let's add the import statement for the service class so hold ctrl then press period then select the corresponding import statement now back to ng Oni lifecycle hook inside this map function we have a callback function with single parameter item which is I trading through the firebase collection so inside this function I am going to define a new property Department name in order to initialize this property we have called get department name function from department service here we have passed current employee department key we have saved the department key with this department in employees collection that you can see here Department inside that we have the corresponding department key now let's add this department name inside this object here so that we can add that inside this area here so we just need to do this property name will be Department and value will be Department in short you can pass Department name it will be saved inside the department name property okay now we have added department name inside this array now in order to show this column in angular material data table first of all we have to add corresponding column name here now let's add an NG container so here it is department name and also we have said the match sort header for this column also we have displayed the data from this new property Department name let me save all of these modifications here then back to the application that's it here we have added a column for department name finally I want to show you one thing here we have displayed five columns from the data source actually inside this list data object here we have more than five properties that you can see here we have department key then gender had date is permanent if I search for this higher date you can see the corresponding employee here which is not fair in most of the cases so I will show you how to customize this filter operation into these file limited columns for that we will use the property filter predicate from the list data object and I will set the parameter with another function containing two parameters data and filter inside this data we have the complete collection of employees displayed in the material data table and here we have the filter which is the keyword that we have entered inside the function we need to restrict the filter operation into these limited columns which we have already defined inside this displayed column array so we can do this we will do this sum operation inside this displayed columns inside the function we will have another error function like this with single parameter element and here we have the can to select a record for the search result first of all foster for we will avoid action column and then we will set the keyword inside the columns which we have specified here let me save all of these modifications here then back to the application if I search for this hire date again you don't have any record because we restricted the filter operation into these five columns here okay that's it you can download this project source code from the github link given below in video description in the next video we will discuss about pop-up dialog in angular material and using the pop-up dialog we will complete the crud operations edit and delete and then we will create a customized conform dialogue for delete operation finally for those who can afford at least $1 I have given a PayPal donation link in video description I definitely appreciate that if you found this video helpful please thumbs up this video and for more hours of videos like this please please subscribe to this channel core affection please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 158,026

Rating: 4.934792 out of 5

Keywords: angular material table, angular material data table, angular material data table crud, angular material data table filter, angular material data table with pagination, angular material data table sorting, angular material sorting paging and filtering, angular material table searching, custom filter in angular material data table, angular material datatable tutorial, angular table sortable, list in angular table, no data and data loading.., angular material tutorial, CodAffection

Id: 7wilnsiotqM

Length: 38min 34sec (2314 seconds)

Published: Mon Sep 17 2018