Angular 14 Material UI ( dataTable with pagination + sorting + filtering + event handling)

hey guys welcome to nigeria case in this video i am going to explain materially when angular 14 and also i am going to explain this material ui data table so it has the wonderful features like filtering pagination and sorting and also the even handling so we can see everything in the detail so before going to the implementation i am going to provide one my demo so this is my application here i just loaded the employer records the records are coming from the services and the functionality the first one is filter so let me show you one zero two nine it's searching and the similar way i'm searching the name also the complete filter is working the second feature is the pagination so see currently i am showing items for basis phi so i can change it so this one also customized to feature we can change based on our requirement and the third one is starting so see so it's starting the ascending order and the descending order the finally it's disabled again if you are clicking the starting option is once again coming so this starting feature also one of the customized feature uh if required we can include in the particular columns so even this demo also i'm not included for this phone and email the final one is even handling see in the action side i am having the two buttons one is edit and delete here i am not implemented this editor delete function so instead of that i just taken this key value so let me show you see in the console currently i don't have any value if i'm clicking this edit i'm able to get the key value one zero two nine and also if i'm clicking some other rows i will get the key value so using this information i can complete this edit or delete operation or else if i want to redirect some other routes that also it's possible so this is all about my demo now let me go to the implementation first what i'm going to do whatever change i already applied so let me revert everything so we can start from the fresh so let me run the application okay our application in running mode let me refresh it so see so this is the very basic template if you are creating the application you will see this kind of template only here we have the link is called angular material just to click it so it is just redirecting to the official site of angular material so here i am just clicking this get started the first thing is we have to install this package in our application so let me install it okay it's saying skipping the installation it's already installed because already i'm having the package if you don't have the package it will install the next thing is we have to choose the theme so i am selecting the first one and then the set of the global angular material typography styles yes so the third one is include and enable the animation yes now it's updating and installing the required packages so it will take some time so the installation gets completed so basically if you are using this material uh you how to include many models in our app.model so instead of that we have to create the separate file so that will be more helpful so let me create it material model so in this model first i am going to export my class material model then i am going to include this ng model so in this ng model we have to export our material uh models the first one is mat table model okay we need to add the reference first so import from at angular slash material so in the material i am going to use this table so our class is added mat table model the similar way we can include some multiple models so one is for doing this pagination so the model name is matt basination model and the next one is for doing the short function match shot model so as of now it's fine if we could we can include little later now i am going to include this material model in our app.model so let me go to the app model so in the app model again the procedure is same import from material model so let me include here also so now we are good to go so let me go to the official site here we have the option is called components so as i mentioned i'm going to use this tables so let me consider this from the basic one so if i want view the code i have to click this one so it will provide the complete information of html and ts file and css so in the css we have very small change so let me include it so i added the similar way i have to copy the whole content of html so let me go to the component so in the app components we have some default designs so i'm going to include after this content okay here i am added and the next thing is we have to include this ts file changes so in the ts file so i'm having one interface the same way i'm having some hard coded records so let me copy and include in my application so let me include it and also we have the declaration is called display column names and also the data source so let me copy everything so i'm going to include here so now we have added the changes whatever they have provided in the example so let me run the application okay application running fine so let me refresh the screen so see now this is our output so what actually they have provided in the example so the same output we are getting in our application also but this is the hard-coded data so actually we need to consume the data from our services and also we have to include this vagination and filtering options also so let me add one service in my application so i'm going to the new terminal here i'm going to generate my service first nc generate service so service name is master okay the service is created so let me delete this pack file it's not required and in this master.service.gs file first i am going to declare my api url ok great so the next thing is we have to import the http client model in our app.model site so it's available in the angular slash common dot http so the class name is http client model also we need to include in this import site also now let me go to the services here i'm going to inject the http client okay we have done and now i'm going to create one function get employee so it will return the data in the observable format so this dot http dot get here i need to pass the url apa url so this is fine so in some cases if you are having this your model is handy how to create an interface in your application so let me do that also so i am going to create one model classes the employee here i am having the fields are handy so let me include it code name email and the final one is name so we have done now let me go to the services so here i am just changing the return type same only but i am specifying the exact model that's it okay great the error also got resolved so now let me go to my component so in the component first i'm going to inject the services so currently we don't have any constructor so let me create it so once it's done i'm going to inject my service so these are the basic steps okay great we have done it and my second step is i am going to create one function and also i am going to declare one more variable m data so our data type is any so in the get all method i'm trying to consume my services so method name is get employee this is the observable so i need to subscribe it so now the datas are available in the result variable so let me format it so once it's done i'm going to ascend this data into employee data so again i'm going to implement one of the function on it so let me provide this quick fix option so here i'm just calling this get our method so we have done so now let me go to the html side so in the html side if you clearly noted we are using the just table the normal table only so we are using one of the directory the mac table and the next step is we have to provide this data source value so the data source value should be in the array format so we have the data so we included and own class so and the next step is b how to initially server columns so currently see here we have the four columns so every columns have the same sections the ng container using this matte column definition we are just mentioning our column name and the second one is for the header information so here we have to provide our hard code value also the third one is the td information this is all about the data binding so we have to provide the excite column name okay so this is all about the change at the end we have to use this tr so in the tr we are passing this display columns okay the display column is nothing but an array so let me come here so here after i'm going to have the values code name and email the final one is phone number so let me do the changes in my columns so i just changed this display columns array so the same thing i have to update in the ng container also otherwise it will show the error so the code and the element also it's coming as the code only so the hard code value also i changed the name it's fine and the third one is email so the email should be small letter the final one is form so now we have done our basic changes so let me see the output so see now the real time records are loaded the data is basically is available in the services the same data only loaded here also just the employee code name email and phone number information also so here if you want to change this column order so instead of this email i want to give the phone means i'm not required to change in the html side instead of that i can handle from the ts file itself so let me cut this one i'm going to include after the name so now see the result so the phone is coming in front of the email the similar way if there is no some of the column is not required so you can handle from your ts file itself so let me remove this phone see now the phone column gets removed but very important thing is if you provide something here but not implemented in the html side it will throw an error so let me add one more thing called action see now currently there no records are loaded so if i'm checking in the console i will get the information i am not implemented this action that's what i'm getting this error so anyway let me include that also so this is nothing but an action so the binding side basically i have to use the button so edit okay this button is not that much fair because we not included the exact style so i will include little later so before that i am going to implement this vagination option for implementing this vagination after the table you how to use matpagenator okay so in this matpagenator we have to include two options the first one is page size options so we have to provide in the array format so let me give 5 10 and 20 okay we have done and also we need to enable the first and last buttons and also we need to show the first and last buttons so let me see the output so see now our pagination gets added so we have the option is called 5 10 and 20 but this basinator is not mapped with our table for doing this one let me go to the ts file the ts file i how to use this view child option so here i need to use this matte page editor so let me create the object as page later and this is the matte base network okay fine so there are got result so our next step is we have to include one more class it's called map data table source so let me show you so after adding this into the table i'm going to use this data table this dot data source equal to new mat table data source here i have to provide this employee information also i need to specify the model name here okay we have done so currently i am having the hard code data so let me remove everything so this export interface is not required and this element data also is not required also this data source i am going to change the data type as ena so now we are good to go here after we will get the data in our data source only so let me change the data source name also okay fine so after that i am going to add this basinator here data source dot page letter equal to so b already defined one page network so let me include here so let me see here okay see now the pagination has been included here so currently it's showing the fire records only so if i'm changing it to 10 it's showing 10 so when changing the 20 it's showing in the single record the decision is not good so let me do one small change so it will resolve everything so instead of having this class in the table i'm going to create one of the dew and here i'm just added this class okay already copied with the class also so let me cut and paste at the end now see okay the size is reduced so here instead of the flux am going to make it as a black okay now we are good to go and also i am going to change the style of these buttons for doing this one first we have to include something in our material model mat button model okay so after that same the grid button be how to do some changes so let me go to the official site i'm going to check some button examples so if you noted here we can use this one so here the direct name is mattressed button okay and color is primary so let me copy this one so here the thing is we cannot remember everything okay so instead of that make sure we have to refer every time in the official site so this one is for the edit the similar way i can add one more button so this one is for delete and here the class is born so let me refresh it see now the descent looks much better than now so next i'm going to include this shorting so the starting also similar to our base nation so let me copy this view child once again so instead of this matte bagginator i am going to use this chart and the final one is match chart so we have to include this data source also short okay we have done it and we have more change in our html side so in the html first we have to include in the table mat shot so after that we have to use one more directory mat shot header see now the sorting has been included for this code so if i'm clicking it's ascending then descending the file it's gone so it will work in the vice versa operation the similar way we have to include some other columns also so let me copy the directory once again i'm going to include this for our names and also email so see now so in the phone we don't have but in the email we have so as i mentioned this is the one of a customized feature based on your requirement you have to include it so the final thing is this filter option for applying this filter option i am going to add this form field this is the matte form field so actually we need to include the class i mean model we have to include it otherwise it won't work math field model and also i'm going to add one input also mat input it's not coming then we have to import manually so instead of this table i'm going to use this input and this model name also mat input model okay it's added now let me go to the html side so the html side i'm going to add on matte label first so this is the filter and i'm going to add one input here so here i'm going to include the directive mat input and the placeholder also filter so let me refresh it okay see now our filter text box is coming we have to add the search formula here so i am going to use the even this key up so filter change i'm just returning say event so after that we can handle from our function itself so here i'm going to define my function the input should be event so the first thing is i have to get the filter value so even that target as html input element so here i'm just getting the value of the particular input that's it so after that i am going to add this filter in our data source so here i'm going to add filter so finally we have to pass the value that's it so let me refresh it okay now i am going to provide my first input is nihira okay searching so when giving test it is working the test one we don't have any record so even if i'm in last page i have the varney okay i'm just coming to the first page so if i'm typing like a rna so i'm getting the data so currently we have covered uh this shorting add this vagination and also filter the final one is even handling so the even handling first i'm going to include in the row click so after that i am going to include in the button click so let me go to the html side so in the html side in the row i'm going to include this click so basically here we can get the complete low information get draw so let me define the function also so whatever value m card i am going to include in the console then only i have to verify so now let me go to the console so the console we don't have any value so if i'm clicking this row so i'm getting the complete information so if i'm clicking this row again i'm getting the complete information i'm going to the separate pages so whatever i'm clicking i'm able to get the complete information the particular row so the similar way we can implement this button click event also so let me go to the button so in the button i'm just binding this click event and here function edit so anyway we are getting the values so let me pass it from here element dart code so now let me come to the console side i'm just duplicating this function and i'm going to change the function name also so i need to refresh it so if i'm clicking this edit i am able to get this value actually this console is not required okay so you know so if i'm clicking this edit i am getting this value the next row next row currently i'm getting this key information similar way if i'm required i have to pass multiple values also so using this information i can complete this editor delete and also if i want to redirect some other pages also that's i can do so this is all about this material ui table using another angular application still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for you

Channel: Nihira Techiees

Views: 30,890

Keywords: angular 14 tutorial, material UI in angular 14, how to implement material UI in angular 14, how to install material UI in angular 14, how to implement material UI datatable in angular 14, material Ui table pagination, how to implement pagination in angular 14, angular material UI table sorting, material UI table event handling, how to get row data in material UI, filtering in angular 14 material UI table, Angular UI complete tutorial, steps for implement material UI in angular 14

Id: 3JTorbC-340

Length: 29min 56sec (1796 seconds)

Published: Wed Jul 06 2022