Angular Material DataTable & Server Side Pagination | Blog Project V-09

I had welcome back this time we are developing a data type of angular material that has oversight pagina different so you can display all the users that we are getting from our back-end and you can piggy night through the patron so the structure of the videos as always first we will have a look at our video outcome then we write or read a user story formless and at the end we will implement or user story and close it back let's have a quick look what we are building in this video so you can see we have a new button for our users here and we have here a little drop-down or select for roads for login and register so we can navigate through this and if we go now to our new users throughout you can see we are having displayed all our users in angular material table and we can just navigate through it so to the next page to the last page to the previous page and we are always making a request to our back-end we can also say you want to have displayed five users per page and then you navigate through all the pages let's start with having a short look at our story so we are here in video 9 and now we want to pegan 8 in the front-end on our users so we have our story as user I want to be able to display all users in a table and navigate through the table so I can find the user that I am looking for and so we want to have a table where we display all our users if all the properties that we get and then we want to be able to navigate food so for example if there are a hundred users and we want to have display 10 years but patrons want to go through the patron and we have our acceptance criteria it is a table with all users peggy nation web size and patron so you can give them like you want to go to the second patient you want to have displayed 10 entries or 5 entries or two entries you want to use angular material for everything and you want to train to know our menu drop-down product you can select so it's got a bit nicer to to handle so let's start with it move it to doing and go in our code let's start by switching to our feet wrapper and so when we say get ricotta so you can see that we are on our project develop so we clear this up and we can just say get flow if you to start and now we name on impeachment services video 9 now it will create a new branch video 9 or feature video 9 based on develop and we can later finish this up with this command here so we can clear this so now we are on we can see it here get status and you know each round so one of the first things that we want to do we want to add here cause vs. a bit messy we can go into our front-end and run in reserve and we can see in our funding that business like messy so we like this and here I'm just letting one more again server so that we can actually connect to it and get data and here we have our contents along so what we want to do here we want to make it here for in and register a drop-down so we can switch between these two and for this we need a Mila material and we can use angular material select services a drop down so we can see it here we can see our favorite food and then go for steak pizza tacos whatever and then it's selected so we need to import this into our mutt human and we can go for here add it to here and then into our imports so there's on that select module and then we can go into our HTML and first we can have a look at everything is compiled and so we can watch it here in our Casa and now you see all the links are clubbed together so we don't want this so what we can do is here we can believe this and at here our meta form field so we have a net or theater and we can get this first we can even learn science so we can say much from left 20 pixels so we don't clap to this upman but normally you would do with this class classes but just to make it easy and we can give this a name and we can just say look in one second so this and then we give it a name not in register and then we can go for our net select and we can get this a placeholder so like you saw here yeah it was the fruits we go to the overview and you see there we have favorite food as a placeholder so we say we have a placeholder here that trust say no game whatever doesn't really matter and then we can have an event here and this is selection range so we assume if you hit a button this event will get triggered and then we can go and execute a function and we can say we want to execute or navigate to function and you can pass here our value from our event so now we have to create or navigate to so we can say navigate to add our value here we can say it was value and then we can say this dot router but navigate to and give it here on up and then our value and then of course we need our constructor with our router from angular and this should be named navigate yeah so this should work fine and now we have here one net select and in this we can give it a met and we could even go for one select here or met option and we could go for example look in here and another one with register but we could also do it a little bit differently and we could say or we could make this an eyelet type script file on your component and we could say that we have some increase here and there's our erase or is an array and when this array has two objects and both object has a name when the slogan and it has a property quite linked and this is Lapine in small cases and the same goes here for name for register and link is register in small case so you can use this it's more characters and then we can just use to be angling for directed what this does we can loop over an array with this so we can say let entry of entries and now you see we have here our array from our component our entries here and now we just loop over it and then we have every entry here and this is rendering into this yeah so everything that we are doing here is applied to all our objects from our area and then we can adhere or bind it to our value and the value will be the entry door link so every entry that we are running here every object from our area will have value link and if you click on it then this will be going into this and this is our event of value so this goes in our value our value here goes our navigate to method function and then we can display here just our entry don't name and we can have a quick look and you see we have few more lucky few that we go to our love you play it when you visit register wind route to our register page so what we could do also as we can make this year the button so we just say button and we could go again with our angular material button and so we can say mat flat button and this can have a lot a link and this rotor link could be or would be admin and then we admin and then we can see we have a button if you click it we go to up an overview of the code okay and we got to love them so the next thing that we want to do is we can adhere our new fare we can navigate into our front-end and then what we want to do is you want to create our new component for our display or user so we can say our angular CLI and we generate and we say component and we want to go into our components folder and then we want to have the component that's what users or users component them so you see it's created here with all our files and we also want to create or to generate the new service in our services and this should also be called user service so you see we have now here our services and we can just put them in a folder or empty authentication service where the same and we can also add our users this year and them to this folder and we have the structure here and then we can add our users component to our odds so we can say with seasons to half users and we have our component the users component that we just created and now we can add here a new button and we call this users and we want to navigate to use us and then we can just add versus CSS property here do this and then just reload our page and you can see we have any button use us and we go to our users page or users component so the next thing that we want to do is Emily want in our user service be able to get all our users and here for we can have a quick look at postman because we already have there our API weakness so we can have can look at with this and Trust regardless so we have we can close all here and then we add we open our get all users here and we curse it sent and then we can see we are getting returned all our users our object here so we want to go against this route and for this we can now add our constructor our private HTTP and then we go for HTTP client on angular and we want to have a method or function find wallet and then we want to return amounts well done and this should be of type B data that we are getting here so what we can do this week and you interface so we say export interface user data and just make this here and so this is an object it has items which are from type user array and then we have to look what else we have so we have here our items or our users and then we have this year so we can add this to our interface so we can say meter or meter and this object is having total that's Rivas and this is number 10 we have an item count which is also number you have items per page we have total pages and we have current page and they are all of the type number and then we have our next object which is links then we have first string previous string next string and last string and so now we have our interface that we need and we can just say we want to return our user data from type user data and then we already learned something and what we want to have here is we want to have a page and we want to have a size so the same like here if we specify here page two and size 2 we want to have paid to and size to displayed so this top three so the correct thing would be limited thinking estrellas let's see yeah limited to one so you can go with this and size is the thing that we get from our later from our angular material originator so we called size and then we will name it here oh we can and so what we do now is we go for that params and we make some new HTTP parameters so the same things that we had been using here so we avoid them to our request and we can say parents and this is perm store depend and then we want to depend our page and this is a string page and then we have another palms and business parms dot append and then we go for limit so for our nest fear service just for our case if you work with Springwood or something different then this might be patron size or something different and we make on the size also stream then we can return our HTTP client or HTTP we want to make it get called and we want to hit Steph iti Steph use us as an host man and then we want to add our terms that we created here and then we can type this and map the outcome services user data and the stripping off the type user data we can just return it and we can also say we want to catch error is there ever and then we throw so here so this should work we can verify this later and then we can go to our users component was now we have everything that we need for them for this and for this we can go to our material angular material table at first because you before we make piggy nation we need our table to display all our data and see we have few basic material table you have a header and you have all of your elements so what we need here is we need our table module and we can go to our angular Motty will import here and use it and then we can go into our user component and can add this here or say what we need at first we need a data source for our table and so this could be from type user data user data and at first versus noia and then we can make example method in it data source and here we can use our service so we can inject it here private user service and this is our user service and then we can say this to a user service not find oil and so we want to go at first page one and have ten users displayed then we pipe this and we can go up for meth and then we have user data from type user data and at last we can just go home set our data source could be user data and report our map from Eric stress so this is my unit and then because versus an observable we just can subscribe to it and if we want we could also just go get out so we see everything works so we just say tap users and concert lock gives us and here and now if we go to our component can open Allah Khan sir we go to our users and let's see why nothing happened so we have to add this to our and if you an inert fire or a method or patron then we can go to our users and you see now we have here our object from data user data our items on our links with the meter data so we can use this now so we have here our data source for what halia then we can go again here to here and we can see we have some properties here so this is our data source that we need later and we can define our column templates and we can also go for our header error so columns to display so we can do this here or we can add this here and you can go for displayed columns so what we want to have a displayed and this our sometimes thing and we have an area and we can just add them here and these are just named after the properties that we have so we have ID we have name we have user name and we have email and royal so these are all called after or named after our user so we can see here we have name username email password and we have to add our role of course and then this could work so semicolon and then we can go into our HTML and what we could do here is for example we can say h1 so to give it a heading and say I'll use us and we can style this and say text-align:center look now we have here all users and now we can go for did and we want just to display our did with our data so us has a value so we go for immediate data so us is not mired then it is loaded and you see you have to neutralize a deal with Nile so this will just be displayed there is some data so I continue only later life is important then we have here our met table and here like we saw this has it's behind it to our data source and our data source will be our data source and then we have our items that we want to display and then we have some attributes for example light our table let's see for how I had a row and we can make it like this or we can go for met and blow and this needs a definition and we can just go for here four columns to display then we can look or we can overlay chance a metro and we say net row definition and we say that row and columns columns display columns so now we can add our you know assets or a table we can see this here this is basically our container so we can compare this and this will have a column definition so with this would be ID then this field would also be our ID and we can just say let row and here we want to display our row dot ID so we could also name this something different like user or whatever we want can you check this later and then we can just do this for all our stuff so we have ID we have name you know we have it here is faces so this and we can go for username and we can go for email and then we can go for our Rohit last but not least yeah so we can just see if everything is compelling well so we kill here and there's an error columns to this plate and yet its name to split columns but my mistake story displayed columns and let's see if it's compiling me it's compiling let's go to our table and we see yeah we get the data we display it and kinda way but that's not really right there so let's see what yeah so we are doing this little bit wrong cause we are just starting you know on that hat I said and so we have to replace this for us if not we are doing it or double away or throw away so this is bit too much so you do it just like this here definition and here and the same we have to do four on that cell and here and here and here and here and now we say that we can look and this seems right so we have here our table and we have all our data so the next thing that we want to do is you want to peg in a through it cause you see now we have to split 10 users like we set in our service but how do we get to the next 10 users or 13 meters or whatever there on the database oh there 13 items you know a database so we would need a second page for this to be displayed so what we can use here is and I met Peggy Mehta from angular module from angular material so we can do with angular material parking meter and we can okay you can see if this is like here and this should also probably there's an example then we'll get an example with a table so we can import this in a way I've done what you will hear an adverse to our imports and now we can use it and we can see here how we use it don't just go to a stick let's and wait till this opening and now we see we can have here on my perimeter and this house can have some awesome women we can make this outside of our table and we can assign here some of our values from our data source so we have a length in our paper size so yeah to be careful because what is called hip a tree size is called limit in estrus or not big energy from that students when we build services but a bit different so we have to train to this we can make here some exercise options we can just say 5 10 20 or 25 and then 100 the length is our data source dot meter dot total items so we can see this here we have our total items we have a page size and this is our data source dot items dot items for Pedro item count I am count we can use so we can copy this year and we can use the items per page this should be here and see it here and then we have the patreon and for this we can use we can make our own event what would happen if you'd click this so we could say on Oggie need change and then we give it our event you know what's missing yeah so this method it's not here so we have to add this so we can copy of his name and we can say I'm tagging a trench and what we get here is event and this will be a page event you can import this from angular material and then we want to do something so we can just set up a treatment here plate event it's a plate revenge and then we can do some value here we can say we have a page and this will be our event dot page index so you can see this is named like in our users no it's not so we can see it here on second in the API you can see it has some properties and we have here our patron x40 based Pedro index of the displayed list of items so we have to check this because you see it's default to zero and the necessary as if we go to our page and there should be nothing I think because where you see zero items but you have to go to page one then everything myself so we have to increase or increase this tremendous number that we get here because we are starting at zero we are starting at one services estimate so the second thing that we want to get is a lot of the size and this is we can get with event dot pay true size and then we can just say page this page plus one and then we can call our user service and say you want to find all it we take in our page we're taking our size we type it and then we map the user data and then we just set our datasource to the new values so we say user data sources user data and this should be it and the last thing that we need to do yes we need to subscribe to it and then we can also just look what is being done here and now you see we have here our Peggy later we can click and then it loads the next elements and the next page and we could also I think they almost something how to add the last to get to the last page so let's see how it was caught so first last buttons if we want to show first and last but insanely UI to our user so we can just add this here and then we will see that we are having not just two buttons but four so we could pin it to the last page for example if you go know what five users we go to the first page and now we are on page four so now we have all our users and a little bit we have to fix here you can see our links a little bit problem because normally we go against API so we have to transfer this also we go into our API folder and we can see in our user controller we are specifying our basic web browsers route in English I think here for our endpoint and so we have to add here an API since we change for this so we can just make a little quick over here what we have done so we have number button users here we have a table from angular material with all our data displayed we can Peggy node prove the data we can choose how many items should be on a page we will always make a request to all the agenda so let's commit our trainers so we can say get at - upper air get to commit and we say video 900 story so you can later if you go to the kickflip repository you can just search for the and comets and go to video 9 and then you see what has been done so we say edit user users component to display our users in a cheerier table with parking meter and added drop-down or select to the menu or menu bar whatever so we commit this you can push this our upstream branch just copy this and push it and what we can say now as we want to close our feature so we can just say git flow feature finish and this will bring it back on develop also it brings it back our feature video 9 to our develop branch you can see it here now now we have merged our future and to develop and we can push our develop branch so we can now track it against our hello story so what we have we can navigate through the table so we have a table with all our users we have a pagination with size and page we are using angular material and we can change the menu too we change the menu to a crop top or our login and register button so there's a stun and so we move this to our next line here

Channel: Thomas Oliver

Views: 15,689

Keywords: javascript, typescript, nest, nestjs, nest.js, angular, typeorm, git, gitflow, node, blog, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, pagination, paginating, nestjs-typeorm-paginate, angularjs, angular-2, angular 2, angular9, angular-material, angularMaterial, angular material, reactive forms, reactive-forms, reactiveForms, regex, paginator, datatable

Id: SoMQJmMUCpw

Length: 39min 10sec (2350 seconds)

Published: Thu Jun 11 2020