Angular CRUD with Web API part 2 | Integrate Web API with Angular | Angular 12 Project

hello everyone welcome back to my channel again so in the previous video we have completed this creating this employee endpoints and for this login endpoint so we have created this eight apis and in this video we are going to target how we can integrate this api with our angular web application so let me just show you the angular application so this is what we have now we have the sign up and login we have already created this if you just go on youtube and search for this on my youtube channel then you can find it all right so i will highly recommend you guys to watch my previous video if you haven't watched it so please go ahead and create this form and create this api endpoint so that you can start with this video which we are going to which i am going to cover now okay so what is our first thing i have to do i have to integrate this sign up api first okay so let me just check what all things are required for sign up so i can see we need to have full name username password let me zoom a bit and then i can show you we need this five things okay so let me just compare it with our signup form so we have i have only full name mobile email and password so let me create i'm one user type select as well so it will be a drop down from where i can select the user type so let me go inside our code of html so let let's go into your signup component.html and add one more select statement for that so let me say sub div dot form group form group and let me copy a select from bootstrap so if you go on the bootstrap just search for select here and it will show this option for you just copy this option copy the clipboard and just paste it here okay so i will require two options that i can select two things i can select one as admin user while signing up and as employee okay and let me just say that select user type a placeholder say select user type me have a class for this as text muted so that should look gray save and check how it looks okay so this is what it is select user type admin and employ we can select let me add some padding top so i'll use the class so this text meter is really not required it is not changing that so let me remove it okay and let me add here a class to this form group as empty empty five four because we are using bootstrap classes so you can use this the way i am doing it so now we have a good gap now between password and select user type okay so from here i can select employee or admin okay so now what i have to integrate is i have to integrate this full full name mobile email password and this user type let me create a label as well for this guy let me copy this label paste as user type save it and let's check okay here's the type is there it looks good let me decrease this to two yes now it looks much better okay all right so now for this user type i have to create a form control again okay so let me first create a form control by going here on my ts so inside the ts i will have one more required field which is my user type okay will be blank or validator dot required all right so now this user type i have to go and use on my form control so how we can do it just go inside the select and just write the name as form control name and give the same name which you have copied the user type okay and now this will also will have validation so we have to put that that this form is required so let me just copy this on the top so if you see on the top we have this just copy this pan and just do what i do just do whatever i'm doing here right now so below the select just paste this and just say sign up form dot what is the control name the control name should be match with this so it is my user type if the form is dirty and if the form has a required field for the form control user type again copy this user type and paste it here and i can say that user type is required okay user type is required if i save it and let me check the validation is working or not okay you go here and check the validation if i say admin it works if i say anything else then it should throw an message so why it is not showing let me just check that okay here if you see the form control is incorrect okay so this name should be form control name and yep and what i need to do is i need to set a value blank for this okay i need to give a value blank empty value and for this whenever someone is selecting admin it should take value as admin and for employees to take as employee okay let me save this and let me go on the browser and check the validations again okay if i go here if i select admin it's good but if i select so it tells user type is required which means our validation is working okay so now we will try to integrate the signup api because we have everything ready now so how i can do it so let us just check that okay so now if you if you see here our api endpoint we are going to use this endpoint now okay so on the top just copy this url localhost 4 thousand four four three seven this copy till here and paste inside our because we have already created the signup api so if you go inside our shared folder in the api service so we will have to create a sign up api so let us just create that very quickly so i'll say sign up all right and the sign up will expect an object okay so it will accept an employee object so emp obj all right and it will return return this dot http we are doing a post call so a post call of type any and inside this i will pass the url okay let me paste this url okay url and then api slash we have to copy the rest of these things api slash sign up where is that okay yeah api slash login sign up because this is the api endpoint for post call for signing up the user so let me copy this and let me paste it in here and ctrl v all right so what it is expect it is a post call so i need to send this object as well while posting it so i'll say emp object that's all this is how i have created the api endpoint so what best i can do is i can copy this because this is going to be a comment so let me copy till here copy till here let me control x and let's go on the top and create a property let me create a public property as login url login api url of type string and this will be this okay and now we will use the concatenation so what we can do here we can just say this dot this dot and then the login api url and we can concatenate in this way or we can use the new latest feature of ecmascript so this two thing and then we can just say all right so inside this a dollar sign and i can say this dot our login api url all right and then i can just say sign up before you after this we can just say sign up sig and up that's all okay this will also work or if you still want to follow the old way then you can follow that as well so let me have a comment on the top and let me do that as well because people are not familiar with this so they can use this one let me just paste it and let me just do it here let me remove this to here and let me see this dot now again api url and then that old method concatenation sign up okay i'm just commenting it just for your reference okay so this is how we have created the signup api url let me save it and let me check if this is working or not okay this signup will be called inside our sign up controller or we can say sign up component so this is inside our service so let's go inside our sign up component and inject this api service all right so let me inject it very quickly you see private api api service and this api service i will try to use here try to replace it with this logic so we don't need this logic anymore because we were using previously localhost like the what we say that fake json server so now we have already created our own api so no need of using this logic now so let me comment this code and let me create a fresh record below it okay so i'll say this dot api dot sign up and this sign up accepts an object okay so that object will be coming from our form so i will say this dot sign up form dot value okay so i pass the object and it says subscribe and inside the response i can call the same thing which i have called on the top here that i want to alert that sign up is successful or best if you see here in our api whenever we are signing up successfully so let me remove it this id and let me try to use it once let me try to do it from the api point and then i can try the same by that let me execute it i'm just passing this random string values okay so i can see i get two things i get an object with the status code 200 and a message so what we will do is we will try to use this message for our alert okay we will not hard code by ourselves we will try to use that a lot so in the response we are getting an object like this so i will use this message object to show our message so our alert so i'll say alert response dot message okay this will alert and i have to reset the form so i'll copy this resetting the form so once my signup is done i want to reset it and i want to send it to the login page again okay i'll go here and send it to the login page okay let me save it and let me check on the browser how it works okay now i will add one employee so let me add employee name as jason muller email as jason at the rate gmail.com password as one two three four five six maybe i can just have one two three for the ease and this guy will be an employee so user type is employee and if i click on the sign up so it will go and hit our database and it will go and hit our backend server and the backend will send data to our platform so it is taking some time so let's check in the network tab what actual things are happening so if you see here it is throws an error called as course and why this car cell has occurred because of this origins okay because the back end origin is running on four four three seven one and we are sending and this request is coming from this particular guy four two double zero so this is the reason of creating a course problem and today we will also learn how we can configure cars in our back end so let me just go inside my.net core application and let me go in the startup.cs class because every configuration is done inside this configure service so let me try let me just stop our application here and let me try to add a service for adding a course configuration so i'll say services dot add course okay so i have to add this core service and this cost service will have and let me take an option for that and i can say that o dot o dot add a policy i need to add one policy okay so whenever i add a policy i want to give the policy names let me give a course policy course policy the name as course policy and i will use a builder to build our project to build that particular car so i will say builder okay all right and now this will add all the whatever thing we are required so first thing we have to have our allow any headers because we can allow any headers whatever i feel like i can allow any origins like if it is local to 4200 or it is localhost some some different maybe i'm not sure because for react it is localhost 3000 so that can be anything so first thing i'll have to say that okay builder dot allow see here is saying allow any origin so i will allow a origin okay and then i will also say allow dot allow any method okay so allow any method like method means get put post delete any method will be allowed for this course policy and also we can allow any headers so say such a dot allow any header okay so our configuration is done but this is not complete this is incomplete why because we have to use it okay in our pipeline we have to trigger this in our pipeline so i'll say here in the configure just say app dot app dot use course okay in the second one you can see all right and just give the name of the policy which you have given on the top so just copy this policy name copy it paste it here and yeah there you go so in this way we have configured our course let me save it and let me run the application and check if things are working or not so let this guy run and then we'll wait till that so the build is success on the left you can see it again runs our back end all right so now let's go here and let me again click on sign up and let me go in the network tab to see the response i can see response 200 and i can see sign up successful as well if i press ok it is throwing me back so let me just confirm that and let me check in my database if employee is the fuser is added or not see if i refresh this if i press on this grid i can see that okay so our json has been added but there is a problem that it is not taking this username value so let us check why it is happening so to fix that error i think i have to go inside with this all right so i know what the problem here is because of this username mismatch if you see inside our model so we have to create the same user model just like this okay so we'll try to go ahead and create that let me create a model first in the ts file as well and so that we can do that okay so let how we can create a model is we will go inside the shared and we will create a folder called as model okay and we can give the same name as the user model okay user.model.ts we'll just say export class and user model and inside this i will have the same thing whichever i have here id full name username password mobile and user type okay so i will have id of type number then i will have full name of type string let me create it and then i can i can show you what exactly i want to do here okay so what else i had i had username password mobile and user type so i'll have username this has been password mobile and user type right and now i will create an instance of this model to use inside this so i'll go inside my sign up and here inside this i will create the signup object okay so i'll create a public sign up okay sign up obj is equals to new sign up okay it was a user model so it will of type user model okay so user model right so i've created an object of that and now i can use the sign up object okay so whenever i want to send my form i'll send in this way i'll say this dot sign up object dot full name i can full take the full name from this this dot sign a form okay sign a form dot value dot full name okay so let me copy this like three times maybe like four times and now let me change this to username and copy this username and paste it here then this will be as my password and user type the last one is mobile okay so let me save this and now whenever i send my object so i will send this signup object which i have created now so i'll say this dot sign up object and this object will go to my back end and this bill from the back end will get stored into my database so let's just try to send the value from the application itself so first of all let me remove this debug points this is not needed okay so let me go here in my application and let me click here to sign up let me give the name as john password has one two three and user type as employee okay and if i click on the sign up button i can see sign up successful let me check in the database if i have the same thing or not so let me open up my instance and let me check the database which we are using so we are using employee management db so let me open up this or it was employee let me just check that okay so it was employee management db where i have this tbl user if i go here i can check john and with the email also has been now coming here so here you can see the full name email password mobile and user type as well so now let me just try to log login with this credential okay so for that i need to have the api integrated so let me try to do the api integration for login as well if i go in the login component if i see here so previously i was using this local host 3000 which was that fake fake json server so we will try to replace this with our new logic so let me go ahead and comment this code okay and let me fix those errors what are those okay so let me remove this that's all and in the service i will go ahead and create one service for my login so for login also i am sending two things i am sending the email object as that as the particular parameter i am sending the employee object sorry as a parameter so i will go ahead and use this method called as login and inside this i will say emp obj type any and this will do the same thing so let me copy this from the top and let me paste it here so just confirm that your url should match so for that we have to check our swagger api url so for login we have this login slash then we have this small login so what let us just check that if it is the same so if you see here on the top i have this api url login api url okay and i just need to change this to login that's all and now i can use this method inside my login component so i'll just say that okay this dot installed and what whatever things i get i'll get that api dot okay first of all i need to inject so let me inject so that the reason it was not it is throwing errors so let me inject it first how can do it it's quite simple seem like the previous one api slash api service and now i can call the method called as login okay and in the login it expects an object so what we can say i can say this dot login form okay login form dot and i can send any value whichever i want to whichever i want to send so what i can do here is i can create the same object instance here as well whatever i have created for the model for the user model so i'll say public login obj is equals to new user model because we are using the user model to pass the data object data and now from the login form i will get email and password correct so what i'll do here is i'll just say this dot my login object login obj dot what things i need i need username so i'll get this username from this dot login form okay form dot value dot email okay and what will even the password the same i'll copy this whole and paste it here and this time password and this will be changed to the password of the form if you see these two names is coming from this email email and this password is coming from this password value okay the login form value and i'll send this login object okay and what i can do and i can subscribe this method so this is dot subscribe let me do that on the next line and then say dot subscribe and if the response is success then you can alert response dot message okay and what i'll need to do i need to route it to the dashboard page so i'll say this dot i'll say the router dot navigate navigate to my dashboard page so let me just check what is the api routing we have we have this dashboard so i have to route it without that guy to the dashboard page so from this line i'll just turn that navigate to dashboard if the login is success okay if i save it let me save it here as well now no errors let's go on the browser and let me just take the credential from the database so i will say john at the gmail.com and the password is one two three one two three and hit on login so it will go ahead and check so let me just check okay i can see the login is successful on the top and i am coming on to the dashboard page okay so in this way we have integrated our login api and our signup api okay let me try to do with another credentials let me just check for this guy if things are working like same let me copy it first and the password is one two three four five six one two three four five six if i click login again i can see login is success and i am into my system into my dashboard page all right and now for displaying the records here employee id first name lastly mobile salary and stuff so we have to integrate the api which we have created this this one so we will integrate these five api now so first of all we will check for this get all employees okay let me quickly go here in my ts file my api service so we have already did it for our get employee but this was with the local local server so we will try to replace this with our own api urls okay so this will be the same so let me just create a replica of this with a different property name as employee api url okay so let me copy this let me remove this login and let me say employee api url and this will be we have to give the name we have to check the endpoint name so this is your api slash employee so we need to have this employee here okay so remove login and it will be e m p l o y e e employee oh sorry on this one this one okay and now we can integrate this with our this first one is our get employee so what we will say very simple so we we can do the concatenation or we can use this to backticks and then i can just say simply that inside the dollar like this dot what is that my the employee api url okay and for getting all employees i have to use this endpoint get all employees okay so let me just write it down here get underscore all underscore p-l-o-y-e-e-s that's it and this will do the get call for us and first let me check if we have employee records or not so i'll just go here and i'll check okay i do have three records here okay and i can say this records is empty so let me so let we will check that if things are empty they are not or i can write it from here let me just update this alex at the rate gmail.com or we could have done by using our update call also okay so let me hit on apply yes now everything has so i can see these three one two one three four and all this data there in the get call so let me save this okay let me go on the browser itself and let me check how things are working okay i can see there is one error it says object object and i know what is the error for this because we have previously used an array all right so this is sending an object if you go here if you go here get employee call if i execute this so i can see it is returning an object okay and previously we are we are doing it for array so whenever you see this kind of array which means we are setting the response as an object so we have to make it an array so let's just try to do that so i'll go inside this employee dashboard and inside here i can see that get employee call so it should be response dot okay and after the dot i have to copy this employee details so it should be employee details which is an array so if i copy this and paste it here now it will take response dot employee details inside this employee data if i save this now if i go on the browser and check i can check i can see all the records and these records are coming from my database and we have using we are using the actual api here not the fake json server so every data is now on the database all right and now let us integrate this ad employee it is see which is very simple when we were doing it previously so what we will do we will just go here and change the api url so go inside this api service dot ts and here you have to use this so let me copy this and let me paste it here for the post employee all i have to do is just have to change this guy so what is the name which we have to use add employee so let me change that to add employee so i'll say add employee if i save it let me just try to add and check if we are facing any error or everything is good so i click on this add employee i give first name as uh i'm very bad with names by the way so i'll give name as raju last name as singh and raju and the rate gmail.com one two three four five six seven eight ten some random number and salary as 60 200. if i click on add okay so my debug point is coming proper so if i go here and say play and i can see raju is added okay which means our ad employee is also working let me try to do add one more record just for a double check so i will add one more as i think i have alex already one of my favorite so i can add jason now jason muller as an employee here so as jason and the gmail.com and some random number again and salary as 58 000. if i click on add i can see csun has added successfully okay and it is getting updated as well at the same time and let me just do it for update call all right so for update this is little this time this will be a little bit tricky so this thing will remain the same i'll have to copy the same url on the top copy it and paste it here i don't need id now previously we were using id but this time we don't need any ids because we are just because database is only expecting an object if you see our api endpoint this is only expecting an object like this so that's the reason i remove the id i just need this and let me fix the error from here as well i don't need id now okay let's go inside our service let me just update this api endpoint because this is called as update now update employee so i have to get rid of this ad and say update employee and will take in data to update it okay and if i go here in this employee dashboard and now this guy needs an id so i need to pass an id name and i can see the employee object is already created for this so let me just check that the name and everything is intact or not accordingly i'll change so i have to match this with my this record okay so i'll do that the same because just to have that uniqueness so in the employee record i will have the same like this so i'll copy this stuff here and paste it here so everything will be just like our backend and this is my id okay if i see everything is same and now here i have to fix those things like this will be my first name my last name email mobile and my salary all right and from this line i have to whenever i click on this on edit i need to send some data so i'll say first name here is last name email it will not throw error guys but just to have the uniqueness i am doing that so that it should match with my back and stuff so that's why okay and whenever i click on this on edit i want to send this id so this id will also be replaced by that and i can see no error is there now if i save all now if i go here and try to update the record let me just do it very quickly i'll update the salary to 60 000 let me remove this two and let me add 0 click on update i can see update successful and i can see the value is also updated here okay so in this way our update is also working so the last thing which we have to do is our delete so let us first check what delete is expecting so in this delete i can see this is expecting in query params with this id and we have to use this endpoint delete employee slash id so let us just try to replicate that in our api service all right so if i go inside this delete i'll remove this as well let me copy this and then i'll paste it here control v update employee i need a slash and then this id okay because it takes an id which i have to delete so this should be delete employee let me remove this change the name to delete delete employee me just see yeah things are here and slash id i want to pass the id which i want to delete so that's all so this is what it is if i save it and now if i go on the browser see things are very fast for us because we have already did that in json fix json so that is the reason we just have to change the api endpoint and things are working let me delete this record it asks for are you sure going to delete and say yes and i can say delete successful and record has been updated all right guys so yeah so this was all about the integrating our back end with your angular so now we have integrated the api the actual api call we are doing actual api call here which we have integrated as well with our angular code and in this way you can just do it and in whenever you're working in your project so in this way you can follow all the steps to do at your own all right and now for the future videos i'll say that i will be implementing role base guard like role base auth guard here as well that role guard and also the auth guard if you see the problem here that i can directly access the dashboard page from here without even login okay so we have to restrict the user if the user is not logged in then he should be restricted okay and before that before that we will be having a session on jwt token how we can create a token based authentication and authorization in our angular project so i will be creating a json web token for you guys where we can authenticate our apis so that if once the token is generated then only we can go inside the page else it will not allow to access it from the route so there are two things which is pending for creating this complete application end-to-end application all right so yeah so this was all about today's video and if you feel that this video has helped you then please give a thumbs up all right and you can share this with your friends so that they can also learn this beautiful angular framework all right and if you have any doubt related to this project or you need some help in your project then you can contact me on my telegram channel so the link will be there in the description below

Channel: Let's Program

Views: 2,662

Keywords:

Id: E4_oRR5SMiY

Length: 38min 44sec (2324 seconds)

Published: Thu Sep 30 2021