Employee List - Lazy Loading | Pagination | Filter | Sorting - Angular | PrimeNG

hi all welcome back in this video I'm going to create an employee list like this using angular and Prime engine so we are using a server side pagination and server side filter and also sorting that means every time we are lazy loading when we click on the pages and when we sort or when we enter a first name in the search box so every time it will call the API and load the data accordingly so let's get started so I already created a project using NG new command and also install Prime NG Prime flex and the prime icons and all those Styles has been added in the angular Json file and also the prime icons is imported in the style. CSS file also added in HTML body remove the margin padding and set the height also once this is done we have to set the back end in order to use the back end I'm using the Json server which is a fake API we can we can fake the rest API for that we we have to install the Json server globally using the command npm install minus G Json server once that is done you have to create a file called db. Json so it should be created here so db. Json file you can create and I'm going to add a structure like this here so when you are adding a realtime application you don't have to do this I doesn't have a back in for that that's why I am creating uh Json server db. Json file once the file has been created you can listen this file so Json hyphen server db. Json then if you're giving watch you will be able to see all the employee list we are created here through this URL so you can go and access employees all the employees here and also I'm running the application in the Local Host 4,200 I'm going going to remove all the HTML inside the appd component. HTML and replacing it with a Hello World once it is saved it automatically refresh the changes then let's uh create a components so now we only have the app component so we have to create the module files components services and interfaces for that I'm using angular C just opening a new terminal to create a new module so NG is the CLA generate module then I'm going to create a module inside the modules folder so module SL employee so employee is a folder name of the module so it will create a folder modules and employee folder and inside that it will create a module dots file the similar way you have to generate NG generate component then modules SL employee so it will generate all the component related files inside modules and inside employee you can see here next I'm going to create a service file so NG generate service and now I'm going to create another folder Services inside going to create an employee folder then employee service so it will create employee. service.ts file inside Services employee enter you can see service folder employee then employ service.ts file is created so I'm going to create interfaces also so that we don't have to use any always so in the typescript we can Define the structure of the object so NG g generate I interface and interfaces slash employee so the interface is also done the next thing is we have to uh add this employee component. HTML whatever the content inside that need needs to be loaded inside the app. component. HTML in order to do that there is a module we have created first you have to export this employee component then only we will be able to access it so exports employee component then this module needs to be added in the app. module. TS file so in this section you can import it so it will be accessible after that go to employee. component.ts file and check what the selector we are using and copy that selector and wherever we want to use this employee component or employee component you just add the tag here that's it you can see hello world is replaced with the employee works so it is loaded now the next thing is we are calling the API using Local Host 3,000 employees we have to get all the list in our component then only we will be able to use inside the prime table okay so for that we have to call the API using HTTP so in order to access the data from the back end we have to write something in the surveys file for that in the corresponding module. TS file you have to import the HTTP client module so that needs to be imported the HTTP client module is getting imported from the angular common HTTP like this and HTTP Cent module needs to be added in the import section once that is done go to the service file and inject that HTTP here so HTTP I'm injecting HTTP client the same from the same component it needs to be added HTTP client as well the next step is we have to create a function in the service in order to access the back end data so for that I'm creating get employes and it it it needs to be called this do http.get and the URL needs to be added so before URL needs to be added I'm just adding a base URL here so private base URL equal to our base URL will be the Local Host 3,000 okay that is done I'm just removing this URL and in order to get the employees list you have to access this URL right so what you can do is here you can import the base URL this do base URL then you can add slash employees so it will return the data here so in order to make sure what it returns you have to create a structure you have to create an interface so normally people are doing is like we will they will do a observable any so here observable any and they will return any here but it is not a good practice so always make sure you are writing an interface for the structure so for that go to the employ dots file and our the structure of the API response is like this right so for doing that you have to create an interface so I'm just added an interface I'm just going to add an interface in the employee so you can see that in the db. Json other than active it's a Boolean other than active every field is a string so I just added that in the employee. TS file and I am exporting that interface this is the Boolean everything else is string right and you can mention whatever from the API it is coming as an employee array and if you want you can also return add observable as employee array so these are the good practices to mention the structure here okay so once the interface has been added the next step is you have to call this get employees in the corresponding component do TS file okay for that you have to go to corresponding component TS file and inject particular service we have created in the component for injecting the component you have to add a Constructor so the Constructor and private I'm just adding Employee Service then Employee Service okay so this employee service is injected the next thing is first to make sure this service is working fine or not we are calling this employee service get employees list inside the NG on it that means on load of the employee you have to check whether this list is coming or not okay so for that purpose I'm going to implement on in it then only we will be able to use NG on in it so here I'm importing from the angular code then NG NG on in it I'm just sending this do get employee list I'm just adding the function and how access that service from the employee servic is this do employee service. getet employees do subscribe then you will get the data you can console log of data our application is running here and in the console you should get the data so here you can see I'm getting all the data here this there is 20 records all the records are getting at once right so all the data is getting so the next thing is this data will be assigned to a variable and we will use the prim table in order to show that okay so employees and it will be an employee array and it will be empty initially then we are going to assign this dot employees equal to data so we got the data in the employees array right then going to the component. HTM sorry not in the component. HTML going to the employee. component. HTML here we are going to replace with the table Prime component right so for that you can go to the prime webbsite and search for the prime component so here you can copy this one and wherever the module you want to use just import there import the table module that is done going to the HTML so the basic structure I'm going to add it here I'm replacing this with this Prime nng and instead of the value I have to add the employee is just removing this style and then you have to replace this heading and all okay so that is a Next Step so first one the first name the first name and instead of the let product I'm just adding it's an employee and it should be employee do first name okay the similar way all the other fields I'm going to add it and the last field it will be the status so employee do active let's see how it looks see all the data is getting loaded at once right so in order to avoid this type of scrolling you can add a scroll equal to true scroll LEL equal to true and I'm just statically adding a scroll height is R 76 VH okay I'm going to add some heading also here in the NG template and here you can give P template and the caption inside the caption you can key a div then inside an H2 then that is employ okay okay now that is done next thing I'm going to add a page Nation so in order to add the page Nation you can give a page equal to True right so pageor and also you have to add how many rows you have to show in a page so now I'm statically giving it as a 10 now it fits properly you can see here the 10 records and when I click on the second page the data is there but this is a client side page Nation now we have to Lazy load it that means whenever each page has been clicked API needs to be called and then F why because we are doing that if you have a more data loading all the data at once will cause the performance issue in order to avoid that see now there is no APA call is going on okay so if you are using the server side page Nation whenever we click on the first or second any Pages it will call the API and get the data so it will be the load will be less like a 10 records will be loaded then another 10 records will be loaded like that so for that what we are going to do we are we are going to enable the lazy loading so for that you have to tell the lazy equal to true the lazy equal to true and you have to mention on lazy load load employees so I'm going to write a function called load employees and it will accept an event okay and this functions needs to be added in the TS file that is the next thing so here load employees and dollar event will be the table table lazy l event and for some versions it will be the lazy load event and some newest version I think it is a table lazy load event to either you can try giving table lazy load event or or lazy load event okay okay so here you can check what data is coming here okay okay I think uh then you have to remove this NG on it so own load you don't have to call it right now since we added own lazy load you have to call this function get employee list inside this load employees okay this. load employees you can remove Implement NG on it okay I think the pagination is not coming why because while doing the lazy loading you have to give a total count also the total record count since I'm using a um you know Json server it doesn't return any total records for temporarily I am giving it as a 20 for now okay so for your case you will get the total records from the backend API from while while doing Lazy loading so you you have to use that one for my case as I mentioned I'm know I'm statically using it for now because of the uh limitations of the Json server okay I'm using so I'm just adding total records for now so now you can see a page is there and if I click on the inspect element in the console the first is there on the network tab whenever I click on the second another list is coming whenever click on one the same list is coming but every time the API is getting called so our next askask is whenever I click on the each page the first 10 record when I click on the second page the next 10 records needs to be receiv for that this is a API backend API for getting that you can mention a page p and limit okay so if I'm giving a page two and the limit 10 it will return from the 11th record and if I'm giving page one and limit 10 it will record return the records from the first okay so we are going to add this in the service and also did you notice one thing in the console so in the console every time when we click on the page the lazy load component lazy load employees is getting called and it has a first key the rows is not changing but the first is zero first time then 10 if I click on the second it will be 10 and if you click on the first it will be zero and based on this we can calculate the page and we can pass to the backend okay that's what we are going to do right now so going to the service file so this is it should look like right so I'm just adding a let or account page details equal to I'm going to add this one here and going to add that one after this okay so this page one it should be automatically changed whenever we click on a different pages in order to do that what we can do is here anyway we are getting an event which has first okay so we are not Direct ly going to pass this one but instead I'm going to create a request and and I'm telling the first by default it will be zero okay and whenever you are doing the lazy loading I'm telling this request DOT first equal to Dollar event DOT first else it will be zero okay and similar way you can add the rows the rows is not changing anyway but still we are adding by default the 10 and whenever we are doing the lazy loading you don't have to add it anymore it will be always 10 and what we are going to do is here instead of the 10 I'm telling it is a request dot Rose and here also I'm mentioning the first equal to request do first okay so that is done and this request I'm going to pass it this do request I'm going to sorry not here I'm going to pass it to the service since this is a global variable I can pass it directly into the service okay and this needs to be accepted here so request needs to be accepted and I have to declare an interface for that so again going to here and Export interface Cas employee request it has a first zero then rows it will be sorry it is not a zero it is a number number and the rows will be also number and you can add this one here okay that is done and how to calculate the page so const page equal to so before adding that one I'm just going to take the first destructuring so first and rows I'm going to destructure from the request sorry request so here I got it then first divided by rows + 1 is our page number and here you can mention the page okay so that is done now we can check whether everything is working fine or not okay so clicking on inspect again on the network tab on refresh I think uh in my browser has some issues if I open this console it is not showing so I'm just closing the console then in the inspect Network tab on see when I click on the second page it loads and you can see it is going uh page you can see the page is two and the limit is 10 when we click on the one also the page is one and the limit is 10 and the data is also changing see 1 2 1 2 okay so we have finished the laser loading of our table okay so instead of 10 here I can give dollar of rows okay so that is done the next thing is we have to add a sorting so in order to add the Sorting you have to give something called a sorting true custom sort as a true okay so I'm just going to add custom sort as true and also add a function called sort function and I'm calling the same lazy loading and I am passing the Dollar event okay and in order to show a sorting icon for now I'm only adding the Sorting for the first name in order to show a sorting icon um near the first name you have to show a port icon Port icon you have to give it and you have to tell the field name so the field equal to first name so make sure it should match okay and also in the th you have to give P sortable column P sortable column equal to first name okay so P sortable column given and the P sort icon given and also the custom sort R and the sort function the same function okay I'm not going to add any implementation I just want to see what happens in the event okay so for that again inspect in the console you can see the icon has been appeared and when I click on it the first will be 0o 10 then sort field will be there and sort order will be there when again click sort order will be minus one the first name will be there the first rows will be same if I click on the second page it will get updated but if I again click on the first name the first will be reset okay so first sort name sort order will be reseted once we click on the sort icon right so and I have to pass the sort field and the sort order to the back end then only I will be able to get the correct data right so for doing that you have the event so in the request I'm going to add sort field then a sort order as one by default okay here once you get all those details just adding this dot request do sort field equal to Dollar event do sortfield or empty and also this do request dot sort order equal to Dollar event dot sort order or one okay so it is uh asking for it has some uh type reference so what you can do is so here the reference is there the request we have been added the same thing we are passing as a employee request so now I'm just adding an interface for this request and in that you have to add these two Fields right so here I'm going to add a sort field and which will be either string or it will be a string array which is the it is in order to match with the table lazy load event okay then sort sort order sort order it is a sort order right yeah sort order will be the number so all the error is gone now now you have a sort field sort array and the first and in the get employee list this request is getting passed and in the get employees you can access the sort field sort order okay and you can mention if sort order sort field okay if sord field is there so instead of the page I'm just giving as a URL params so just adding the URL params here and here you can add so when you see the employee list in order to see a sort field in order to sorting this one you have to add sort first name then you have to add order descending or ascending okay you can give like that so I'm just copy paste this one and with the existing URL p PS so I'm just adding plus equal to that means it will upend okay upend with the existing URL parm I can give like this so instead of the con I'm just adding the letter and this first name should be replaced with the sort field and the order should be replaced with a sort order so if the sort order is equal to equal to 1 then it will be ascending sorry then it will be ascending otherwise it will be the descending order so it is done going to the application I'm going to test it so Network tab so when I click on the first name you can see the page one limit 10 is Right sort is first name and the order is ascending right so order is ascending then I click again the data is updated and the page one limit one first name order is a desending I'm going to the page two so page two limit and first name order descending you know so the first name last name first name sorting and the page ination with the server set with the lazy loading is working fine now the next thing we are going to we are going to add a search box here and when we type A search the same way the lazy loaded okay we have to uh call the API and get the result okay so going to the HTML and somewhere we have to add a uh input box so before adding the input box we have to add a corresponding module from the prime here so for that I'm going to use input text module needs to be imported since I am using NG model also adding the forms module or you can use a reactive forms module also okay that is done going to the HTML part I'm going to add a employees here okay so in order to add that um the input box I have a reference so I'm just going to copy paste that one here T okay and while input anything I have to call a function and I have to use a global filter NG model okay so in that I'm just adding Global filter as the empty and also I'm going to add a function filter employee that is a function and you will be able to get this Global filter here okay and let me check how it looks now yeah the first name is coming here in order to use I'm just going to add a class um Flex from this is from the prime Flex okay Prime Flex SS um I'm adding a flex then align items sender justify content between I think this is a class let me check yes so employees is there a field is there okay so that is done now when I click on the filter when I type something on the filter you have to call this API right but that API this request should also contains the first name filter Okay so either you can do if you have a multiple filter you can do like this the filter then first name okay so let me try to add like this way okay the filter first name is equal to empty and it will compline for the type mismatch so filter is an optional one and you can add the first name as string save going to the TS file and in the filter employee initially the filter first name is empty once you apply a filter that means once I started searching or typing on the filter employee you have to pass the request right so I'm just adding something like this so in the request I'm just taking all the other values existing values of the request and only updating the first as zero because when we type something on the input the page ination should be reset to the Z for page right so in order to do that and the filter the first name should be the input box value I'm passing it will call the get employee list and here it will pass this dot request which also contains the filter I'm saving and it go to the service file okay here you have to access the filter then I'm telling if the filter is available and and sorry and and filter dot filter DOT first name so if you have a multiple Fields inside the filter you can do a 4 H in my case there is only one field that is I'm filtering based on the first name okay so in that case the URL FS plus equal to so if you go back to the API again you can see the first name you can search like first name like or first name equal to so I'm just preferring with the first name like okay so just copy paste those things I'm just adding here okay and the first name like um whatever the data we are getting for the first name just adding it here save so let's check how it is so in the inspect Network tab if I'm searching j o yeah you can see it is getting updated why it is still showing two pages because of the restrictions of the Json server in your case if your backend AP is returning the total records it will be only show the one page okay for my case I'm statically giving the total records as a 20 okay because of that so this part leave it and I'm just undoing so you can see all the data so coming to the AP part the page one page 10 and first name like see first name so if you want you can also add the D bounds okay in order to not call in the AP every time on the on press of the button or you can call the API on blur also instead of here in input if you don't want to call call the API all times or you can put a search button accordingly okay so you can do the filters just adding Jo with the J you know you can see it is filtered with the data okay and in order to do this temporarily hack what I can do here there is in the HTML the total records I can tell that the employees do length length less than 10 it will be the 10 or it would be 20 it's not your case this is just to hack this page two stuff so you can see now only the page one and and I just removed I can sold I can page in it so everything is working fine okay the extra thing I can do here is the status now it is showing true what I can do is I'm going to add a tag here okay tag module from the prim so here I'm going to just add a tag module to make it good looking just added a tag module and I'm going to add in HTML something like this that means I'm add a tag and I'm telling employee is active that means true then it show a success color or otherwise warning color if it is active it will show active or it will be show inactive once it is saved you can see this so this is all about the lazy loading in the pagination and in the sorting and also we are handling the server side a call for the filter also

Channel: Learn from Scratch

Views: 3,208

Keywords: angular primeng examples, angular projects, angular primeng projects, angular primeng employee list, primeng table with lazy loading, primeng table with server side filter, primeng table with server side sorting, primeng table filter, primeng table sort, primeng table example, angular primeng list or table example for beginners, primeng lazy loading, primeng server side pagination, primeng scrollable, primeng angular basic app

Id: 4qaIJehpYaw

Length: 34min 24sec (2064 seconds)

Published: Wed Nov 15 2023