angular tutorial for beginners Searching-Sorting - Pagination - Fetch and Data from Rest-API

hey guys welcome back to the channel thank you so much for my new subscribers i appreciate the love thank you again guys but tonight i am going to show you guys part two so i what i did is the previous video i ended up creating the backend uh creating a rest api using that net core which let me show you guys oh if you guys want to watch the video and you guys that way you guys can uh put together the back end so this is the video you guys can go to my channel and watch the video so this is this is it so what i did is i ended up deploying it to my server uh which i will share the address in the bottom of the video so you guys can actually access it or you guys can watch the video and create your own uh press api and you guys can use it and deploy or whatever whatever you want to do so this one here is my i deployed it to this here so it's actually running in my server so what i did i actually end up creating an application using angular for the front end so i can actually uh call the api so let me show you guys so here is the front end this is using angular which is over here this is pretty much what we're going to be working on so let me show you guys what the angular can do you can actually search it you can actually search by name i see i has pagination so cool uh you know search imagination very simple uh you can actually go up you can actually sort by greater less than see it's going up and down perfect so now let me show you so if you actually take a look over here see how it says one it's marcus so if we go back to my swagger and you call my api go ahead and uh see if you actually take a look see id1 is marcus id2 is ronda i just made up some names so um so so if you take a look see that is actually uh angular calling the back-end so in this here is all this data is actually saving to my sql server it's pretty cool right so that's pretty much what we're going to be working on it so let's go ahead i'm going to go ahead and close this up uh don't forget to watch the video guys pretty cool this is part one and part uh there's also part two in there so don't forget to watch that all right so i'm gonna leave this one open let me go ahead and close this one up since we're not gonna we're not gonna need that so the first thing you guys gonna need is you guys gonna need to open your vs code i'm going to go ahead and close this one up since we're not going to use it because we're going to build it from scratch so the first thing i'm going to do is i'm going to create a new angular application so so i'm going to go ahead and do that and i'm actually i'm gonna actually put it here in my repo let me go ahead and copy this and i'm going to call it ng new i'm going to call it new new new members you can call it whatever you want new members hit enter it's going to take a little bit um all right so first thing is asking if this if you want to do routings um we're not doing any routings for now but i'm going to click yes just in case for later if i decided i'm just going to use plain plain css so this is going to build the application so i'm going to go ahead and skip this part all right guys so now my application is built i'm gonna go ahead and cd to uh what did i call it uh new members i can catch you she what did i do it went blind blink blink blink where did where did it go sorry about that okay there you go see the uh new members all right so then if you want to go ahead and open it in your vs code um just type in code space dot and that will open it up cool so now it's open let's go ahead and open your terminal all right here what i want to do is i'm going to do ng serve so you guys can see what the angular 13 actually brings in this is going to take a little bit so the very first thing that i do whenever i build an application actually um i notice i have to go to my uh i think it's this one i think it's the package jason uh no not there here i think ah here uh if you actually go to the ts config json you see where it says strict i always put it to false the reason why is whenever i'm building stuff i notice it does create some errors on it so make sure you turn that off so this is just taking just a bit all right cool so now that that open up let me go ahead and open it up on local 4200 all right cool so that's that so that's that they open up so they're very um go ahead and close this up okay let me go ahead and close this up so let's go ahead and close this let's go ahead and clean up your workstation all right let's go ahead and stop the application all right unless all right so the very very very first thing i want to do is i'm going to go ahead and install i'm going to go ahead and install bootstrap so what i do i always go to versus ngx bootstrap and i go here and click on get starter and i actually what i want to do is i want to go ahead and install the ng ad if you actually do mp install inject then you have to do manually install a bunch of packages i don't like that i like to go the quick way easy way so let me go ahead and do that go ahead and install it just happen okay there you go ahead it's installing all right i'm gonna go ahead and pause the video while installing okay cool so now that i have the bootstrap installed the first thing i want to do is i'm going to go to the angularjson and i want to make sure all right so see install bootstrap for me and also install the bootstrap daypicker uh so see it that i have to do it manually so all of that guys still for me so and also what i want to do i want to go ahead and install npm install on awesome so let's go ahead and install that too that's not going to take too long so let me go ahead and close that so we have that and clear up the bottom all right first thing i'm going to do is i'm going to create a go ahead and create a component so it's going to be ng i'm sorry ng generate component and i'm going to give it the name of members remember so that's what we're creating so normally it gives you a test ts but i actually we're not doing any testing so i'm gonna go ahead you guys can actually do the same thing skip test and it will create three three four uh three files all right so let me go ahead and check it yep three files perfect so what i'm going to do i'm going to inject this component to the main add component html right here so let me go ahead and delete that and i'm gonna inject this one so this one's called members oh okay i messed up there some members all right so let's go to build it and serve all right so that build so let's take a look all right cool so that's working let me go ahead and all right so that's working all right so let me go back over here so let's go back to the member because that's where we're going to be working on so here we want to do i'm going to get rid of this and i am going to we're going to do some html here so i'm going to create uh the table table border and all of that so let me go ahead and copy this real quick [Music] all right guys so what i did is i just copied the html don't worry i will share that in the bottom of the video uh so you guys can copy that this is just plain html let me show you guys right now it doesn't do anything if you type in you know it names nothing it doesn't do anything so so okay so the next thing since it's already got the html in there next thing i'm going to do i'm going to create i'm going to create a service so that we go ahead and call the api so let me go ahead and stop this and i'm going to create a folder right here right on the app i'm gonna i'm gonna call that i'm gonna do underscore services so that way it's on the top uh and also i'm gonna create another folder which i'm gonna call this one models so again i'm going to do model underscore models so that was this on the top okay so here that's that services so services we're going to use it to create uh to gen to call the api so let's go ahead and let me create a service actually let me do it from here see the let me do it from here cd [Music] and let me do ng generate service and this one we're going to call it api and we're going to skip the test oh hold on and i need to go see your services like that so all right cool so i created that all right cool so that's that yep this is the one i'm going to use to call the api so actually let's go ahead and do that right now cool so that's that so in order for this to work so we can do a http uh call we have to go to the app module and here what we got to do is we have to import import the http client module let's see if i can automatically import this nope nope it's not working so i'm gonna have to do manually so i'm gonna have to do import so this one here what i'm gonna do is we're gonna do http client module [Music] there it is cool so now that we import it to the app module then we can actually access it here on the service so let's go back again to this service and here what i'm going to do is and right in the constructor we're going to do private in fact it's called all right private http uh let's make lowercase http and here we're gonna do http http client all right so see oh so the reason is important automatically all right so here what i'm going to do is i'm going to go ahead and grab my first i'm going to call it uh get api i think i'm going to call it uh let's just call this one get members how about that game members because that's what we're going to be getting game members so let's do that game members so here i'm going to create a url i'm just going to create a property here and it's going to be a string and this one is going to be equal to the actual api so let's go over here i'm going to copy that so this one's supposed to be api members all right so here because there's a service you want to do a return you want to do return this http and we want to do is get and what you want to get is you want to get the base url uh we can also do a instead of creating this property here you can actually copy and actually paste it over here i like to do it this way so that way in case uh like let's say i want to change it or if i want to do anything like that i can just add up instead of changing the whole thing i can just uh they said i want to change it or i want to create more um like the as the application grows it's easier to actually uh to change to change the address just by creating a base url so that we don't have to go and change every every line of code that's what that's the reason why i do like that all right so [Music] here now that we have that um let's go to the models and the models what i'm going to do is i'm going to create one for members i'm going to call uh let's generate an interface and this one i'm going to call it members actually call a member remember so here what i want to do is i'm gonna it's gonna have the same properties that swagger has which is over here so it has an idea first thing lesson i'm going to do the same thing this is the beauty about having um about i mean angular for the typescript so when it compiles it'll let you know there's any misspelling all right so the first one is going to be the id is going to be a number the next one is going to be the first name one's going to be a string the next one is going to be last name here's going to be a string so the next one is going to be uh email and it's going to be string [Music] here's going to be mobile there's going to be a string and the last one is going to be salary so here is going to be string perfect so now that we have that so now that we have that now we can actually go to the component so let's go here to the component uh back actually no let's go back over here to where the api services is and here i want to pass a property which is the one i created which is the member and it's going to be an array so let me get import this now that i import that then we can go back to the component which is right here so here in the component let me first thing i want to do i want to import the service so i'm going to do private private and what did i ah api so i'm just going to call it api and then it's going to be api service so now that it's imported so now we can actually go here i'm going to call this one get members yeah let me get some water all right remember so the first thing i want to do is i want to do i want to do this api and it's going to be get members and you want to do is the first thing i want to do is subscribe i'm going to subscribe to this and then i want it i want to get the response so you want to do you can spell the whole world the whole word respond i'm just going to put r is our res which is respond and then here we want to do oh i have to import the property the members so it's going to be members this one's here this one is going to be member gotta import that so it's it's equal to in our nt array so that's that so now that we have that property i want to make that equal so i'm going to call this members i'm going to make that equal to the response so once you have that you have to initialize it so you have to do this okay members and now we can actually go to the html back over here so here guys never done the in g4 that's what we're gonna do all right cool so now that we have that in place so now we're gonna do is we're gonna pass our engine 4 here so let's do the ng4 and g4 spell and this one we're going to make it led member of members of members okay so that's the late member of member all right so first one is going to be a tv at td so the first property is going to be member id so let's let's see if we get anything so let's go ahead and build the application again let's do energy serve see if we can get anything well that's building i'm going to go ahead and continue doing this those so [Music] first name next one was last name and let me format this so it was last name okay so build already see what we get everything went well see what's going on oh there it is that was kind of quick all right cool that's building that perfect all right so let's go ahead and open the console i want to make sure there's no errors in here nope not no errors at all so let's go ahead and continue the mobile and salary let's go ahead and do that so smaller like that and then salary all right so let's see if that's yep it populated perfect all right cool so that's that so that's actually coming from over here so this one's id with 10 me see yep perfect all right cool they do one two three four five six seven yep perfect it's working so far so good all right so the next thing i want to do for my document all right so let me think for a second all right so the first thing we want to do i want to do [Music] i think we should do let me see we should do the sword let's go ahead and do that so we're going to need to install a couple more packages okay let me go ahead and close this up let's go ahead and close that um all right so we have to install a couple packages so the first one i'm going to do is we're going to need forms so i'm going to install that forms module that's amazing actually auto imported myself for for once i guess all right so that's that so that we're gonna need that and also i'm gonna go ahead and install the ng2 search by module so let me go ahead and let's go ahead and look for that so it's going to be ng ng to search pipe module right here so i'm gonna go ahead and install that let me let's look at the document all right so i'm gonna go ahead and install that one you're ready to stop the application let's go ahead and install that it's going to take a little bit so let me go ahead and post cool so now it's installed so i'm going to go ahead and import it here so it's going to be ng ng 2 [Music] search pipe module right there they actually import it i'm very surprised thank you vs go you've been wonderful all right so now that we have that now we can actually go back to our members component ts right here so here we're going to do a few things so let's do it so first thing i'm going to do is i'm going to create a property here so it's going to be first name so this one i'm going to make it equal make it to type any this is going to be a type any so here let's create a search function oh i can spell right so this one's going to be search all right so here you got to go back over here to the member html which is right here we're going to go all the way to the top where i got a form over here here we're going to do a few things all right so up here we gotta pass the ng model which is uh uh it's better right here yeah let's make it over here the ng model energy model and this one we're gonna make it equal to first name first name okay and then also we're gonna do all right here we're gonna do the sorry it's gonna be we're gonna pass the ng model here ng model change and this one's going to be equal to search which is the function that i created yeah right there so this one's going to be equal to the function that we created so the engine model is actually equal to the name okay so that's because we want to search by name so now that we have that we can actually go back make sure you guys have name and it's equal to first name so now that we have that we can actually go back to the component ts and back to the function so we're going to do a few things here back to the here so here we want to do is we actually going to do a function so it's going to be if this first name it's equal to nothing so empty we're going to do this on init and so if it's equal to nothing we're going to make it to ng uninit okay so else this member is equal to this member member then we're going to use the filter the built-in function the filter so then with the response is going to be uh the respondent is going to be we're going to make that to return press first name to [Music] local to local lowercase and then this one want to do is you want to match it you want to match to this first name to lower first name to local local lowercase and that leads guys for the search all right cool so now let's go test it let's build the application again we're almost finished guys we almost finished you see nice still building all right it's gonna build the packages let me go ahead and post the video all right cool so build applications so now we can go over here and let's type in marcus cool it's working again so let's type in uh let's type in puma let's type in tom yeah it's working perfect and i have opened the console it's not no error codes on it all right so now that we have that we can actually work on the pagination so let's go ahead and work on the pagination all right let's go ahead and stop the application again so now that we have the search and right now i gotta look for the pagination so i'm gonna look for ngx ngx imagination pagination module go ahead and copy that let's go ahead and install that it's gonna take a second so while that's doing that i'm gonna go ahead and go to the up module here and i want to go ahead and import that so it's going to be the ngx imagination module wow it actually imported for me that is beautiful that is so beautiful so now that we have that we can actually go here back we can go back over here okay so now that data is actually installed so we're over here back to the member ts so the first thing i want to do is i'm going to declare it's going to do p for pagination and this one's going to be a type number and this one is going to be equal to 1. so now that we have that we got to go back we gotta go back to the member html here here we're gonna do i'm gonna go back to all right so we have that so here what we're going to do is we want to pass the pagination pagination control control imagination draw actually it's called controls amazing amazing it's called controls and here we want to do is i'm going to pass the page page change all of this is actually in the document documentation so you can copy and paste that all right so this one here we want to make it equal to the p p and that's equal to any bend and here you got to go back over here to versus the ng4 and you want to declare the pagination imagination and this one here is going to be you want items per page how many items you want per page so this one is going to be equal to 5 and the current page you want to make it to peep which is number one see if it works let's go ahead and build that imagination items per page make sure it's correct yeah let's go ahead and build this it's going to take a second all right guys so bill i had a misspelled this misspell here so it's supposed to be supposed to be patching name like that all right cool so now that we have that and actually if you go back to the documentation it actually tells you everything here see it's supposed to be agent uh paginate items per page current page so pretty much is everything and see how it says here if you want if you need to go to the component you can actually uh the clear property uh which is uh for pagination and equal to one so let's see if it works yep it's working perfect it's working perfect all right cool so that's that so now the last thing i'm going to do is actually i'm going to go ahead and install one more package which is going to be the sorting so let's go ahead and do that all right so i'm go ahead and stop this and let's go back to the app module here and what we're going to do is we're going to oh well first i have to search it um this one's going to be ng ng mg2 and it's gonna it's called border or pipe no i think it's called order it's called order all right let's see if we can find it all right so order pipe i think is this one quarter pipe it's no longer available order pipe yep it's not let me try to find it the one i installed give me one actually to say guy actually this was the one that i ended up using all right so let me go ahead and install this one it's going to take a little bit so uh that is importing i am going to go ahead and install it in the up so it's going to be ng to [Music] water module there it is just like that there yep it actually imported wow i'm amazed i'm amazed good job bs go my goodness good job so now that we have that so let's go ahead and go let's go ahead and go to back to the ts and let's go over here so here we're going to declare a key and this one's going to be a string and then this one's going to be equal to the id all right so and then this one wanted you want to reverse and just make a boolean and let's make it false all right so let's create a function which is this one's going to be soar and this one's going to be a key and this is going to be any so then that's going to be this key is equal this key is going to be equal to key and then this reverse because we want to go up and down it's going to be equal to not this reverse so now that we have that let's go back to the html and within the html we're going to do we're gonna do two things we actually go back [Music] over here all right so here we're gonna i class let's let's pass a font awesome so this one's going to be of uh sore this is just fun awesome uh let's do the same thing for the other one let's pass it over here because we want to search it by the first name all right so let's see let's go ahead and build this and here we're going to pass because we want to this one want to sort it by id so when we click it so it's going to be a function of click and this one's going to be sort and we've got to pass the id oh he's building that i'm gonna continue it's going to take just a second alright cool so now we have that let's see what the project looks like oh you know why it's not working because i forgot to install it on on the angular json the phone awesome so let me go back over here all right so let me go ahead and go back over here see over here you have to install the phone awesome so let me go ahead and do that real quick all right guys so i go ahead and import the font awesome here so i forgot to do that even though i installed the package so hopefully it works yep it's working but it is not descending or abstaining ah okay let's figure out what's going on with this let me go back to the angular application let's see what did i mess up all right so let's go ahead and go here let's see sold by these let's figure out what's going on all right guys so i know now why it's not working so i open the documentation that's why it's important to read the documentation see over here i forgot to do this so i forgot to put the order by so let's go back to [Music] the angular application so here we're going to do is we want to do order order by and then is we actually created a key and we want that key to be reversed reverse just like that so if if i did a prop if i did it correct everything should work so let's go ahead and check it out yep it's going yep it's moving up and down perfect all right cool so i want to be able to do the same thing over here um where right where it says first name but it's not working so because i got to do the same thing but here i want to sort it out by the first name so let me just copy this so instead of being id i'm going to do i want to do first name excuse me my daughter is calling me sorry about that my daughter was calling me all right so alright so click soar first name all right i think that's it all right so let me go ahead and check it out see if it works yep it's sorting out by the name that is so cool all right that is sweet the pagination is working the search it should be working yep no there's nobody named by that name mario yeah hold on what is going on marie wait did i mess up oh it's because of my rio right there there's one there uh louie yep um bob yep up is there sweet it's working cool guys so let's go ahead and close that out yeah so small applications with angular see that calling the api so see all of this is the back end this is the angular application all right guys but this is it this is this is the whole application i know it was a long one but thanks for staying all the way to the end don't forget to like leave a comment and they stay tuned for more videos and i'll see you in the next one and again guys thanks for my new subscribers and i'll continue to make some more videos so stay tuned for more peace and love see you on the next one

Channel: MartinDevs

Views: 7,360

Keywords: Angular, Angular developer, Javascript, Mvc, Vscode, Programming, Coding, Pagination, Searching, Postman, Visual studios 2019, Website, Web design, Tutorial, Spa, Single page application, Aprende angular, Programar, Programacion, Free tutorial, Videos gratis de angular, Bootstrap, Ngx-bootstrap

Id: V2D7U37wh3o

Length: 43min 58sec (2638 seconds)

Published: Tue Jan 11 2022