Angular 17 Login | With API Integration

so welcome back to Learning Partner in this video we are going to see how we can Implement login page with angular 17 now everyone knows like there are some changes we kind of these are the big changes we it will come across when we do the development right so that also we are going to discuss like what new changes are there so whatever the errors you encounter when you start working with angular 17 right all these things we are going to discuss now before starting if we say login page right so what and various scenarios are there in the login page first is like if you are appearing for the machine test or in the if you are appearing for the interview if someone asks you like uh to implement the login page so there are multiple scenarios but which they can ask first login page with local storage means this Lo in Lo in this login page they will ask you to create a sign up page also and Plus login so you can create a form and you can store the data into the local storage and uh in login page you need to check the user credentials with that local data only right this is also one of the machine Test example second scenario will be login page with real API right here they will provide the API to check login right whatever the users you need to check that they will provide third is login page with API plus token based authentication in this you have to use Interceptor okay so these are the various possible scenarios we have when we come across across a login page right uh don't waste time in UI designing just uh type login page code pin you will get tons of the redeemit available code you can just use that but just focus on the functionality okay now so in this episode we are going to cover this login page with the real API right so now in my free API Min project.com Swagger you can see the login page is there in the user controller you can find all the login APS from create user you can create the user and the login API you can use if you pass the email ID and the password you will get the token like this right so this this is what do we say an API which is token based API right but for now we can just cover the second scenario which we have talked about login page with real API without we won't be implementing the token and everything but in next video again I will cover with token and everything and the lastly I will cover with the local storage the first scenario which which we have discussed now so in my GitHub you can see the code in angular 17 login page now this repository I will try to clone so this is my clone URL let's go to the folder YouTube angular 17 here I have to open the command prompt now I have to clone that repository so get clone space URL you need to enter so it will clone that now currently I don't have anything in the repository so that's why it is saying like you have to appear to clone empty repository now in this folder I have to create the project right so I will open the CMD over here NG new I will just give the name of the what do we say uh repository only so let me just copy the name enter now it will ask some things let it ask so like which which CSS framework do you need so let's go with the CSS only now it will again ask this is an angular 17 so in angular 17 we have what do we say server side rendering as a stable feature right so it will ask you like do you not do you need a server side rendering or not so we are just focusing with the login page so I will say no and press enter so you can see the basic project it has created now one more thing I have to do I will just stop the npm installation so if you remember in angular 17 we have created the project so again this we have to move contr x to the parent otherwise in angular 17 again we will have angular 17 just like that so let me just delete now when I do the videos multiple projects I have to create so I cannot keep uh what do we say load model copy in all all all the project because it will it takes so much space so what I have did is with angular 17 folder I have already installed the node moduel with package.json so now I just have to to create a shortcut over here so I will open the command prompt this you also can do with administrative rule administrator run now you need to go to that folder CD YouTube CD angular 17 CD angular 17 login now here you need one command that will create a shortcut of that 17 moduel so this is my command I will paste over here right so now you can see here we have got the angular 17 shortcut so with this approach you don't have to create node module every time you just create a you just put that node module in a specific folder and every time when you create a new project you just have to create a reference of that right now so we just need to open this project in the visual studio code right click new visual new video code let's open the folder open folder folder the folder path we have created let's enter select so now you can see we have open that particular folder now let's run this also so we're talking about angular 17 so you might also know like we don't have app module right we have some app config and rap route file is there let's run the project running command is same only now so uh in my node module I already have the bootstrap and the everything but to use the bootstrap and the font we need the bootst file right so in angular dojon I will add my bootst file reference like this I just need a bootp file so that we have to put it in the style section right let it run so it is running on the local 42 so now you can see the basic page will come right right so this is the default page we get with an angular 17 now first thing we have to create the routes now whenever we talk with whenever we uh start on the login page login page is like when user hits our application by default login page should be visible we don't show nowb bar or the sidebar anything on that login page only login page will be there but once we do the login then it will redirect to some another page where it will have a sideb of the nowar everything right so to achieve that structure let me just save it if we are not logged in app component will be our parent component but if we are logged in then we have to make another component as a parent component so for that I will need couple of components so in app folder I'm going to create component Pages folder now inside this I will create my components open in terminal NG generate component first compon component login right this is the basic one we are going to need enter now in angular 17 every components are by default Standalone component so it will come to the story like why and Standalone component what is different over there right so one component we have created that is angular uh login page another component we are going to need that will be used as a parent component where we will have nowar and everything so NG generate component I will name it as a layout here I will have the now bar and the router Outlet let's press enter and after login I need to redirect to somewhere right so after login I will redirect to the dashboard page so I will need a dashboard component let's enter so I have created three components login layout and the dashboard right now after that we have to create the routes so we have to go to the app routes. TS here I have to create the routes this is the empty file now here first route it will be the default route so path will be empty okay it is coming directly like this let it be so first default route if it is default we need redirect to property let it load redirect to and we have to redirect to login page if we don't have anything in the URL it will redirect to the login page and we need one more strategy over here that is path match and we have to pass the P this is my default route if in the URL we don't have anything it will redirect to the login page then we need a login login route so name will be login component we have to open on this URL is login component right after this login we need to create another route that will be for the layout but again path will be empty and component will be layout and to this layout component whatever the routes we are going to have after the login right whatever the routes we need that will be useful after the login that will be part of the children for this component so we have to add children's over here right so currently we just have one component after the login that is dashboard and component will be dashboard right so this is your structure should look like first default route then then second your login component then third will be a empty route but with the component as a layout component and to this layout component after login whatever the component you are going to display after the login all those components will be registered over here to the children of the layout component because in layout component we are going to have the router outlet and the nowar right so this is the route you have to develop after that so route just give me a second routs we have created after that next thing is like we have to start working on the login page now when we have created the project some default HTML was there in the app component so let's remove everything and we need router Outlet over here right let's check if we have router Outlet implemented yeah now coming back to angular 17 new things just a rule is there whatever you use you need to import that so let's say in HTML I'm using router Outlet so I need to import that you can see previously we it was not necessary to import the router outlet but now if you are using anything you need to import it so router Outlet we have imported and we have provided that an import statement this is the Standalone uh component right now let's get that login page code so if I save everything let's go to the page now you can see by default login is visible even if if I remove uh URL from the browser now so still it is redirected to login base that's because of the default route it's because of this now we need the login page right so here let's get the code of this so this is the HTML let's copy let's paste in the HTML then we need the CSS also so let's get home CSS is from from body I'm taking it copy let's paste it in over here now currently we don't have body right so you can just rename this with the parent class and whatever the HTML we have that we can wrap inside okay one section was there right so D class parent let's say same login page should be visible now okay body is something else right so we need to make it du let's save now you can see same login page is visible but it has some border also I think it is coming from the body display FX Center height and width is also there from where it is sticking that let's try to remove this now it is breaking from where it is taking that display F height okay let it be let me just inspect and see from where this spacing is coming body I don't know from where it is coming let's try margin zero okay so that was coming from body so let's go to the app page uh sorry index.html and here let's make it style margin zero let's save and check yeah so now you can see login page is properly visible still it is going outside it is going outside we have copied everything right nothing else is left let's copy this also okay let it be we don't waste the time in the login page now we have the login page right after that in the login page we need to integrate the API right so that API is going to be sorry let me just open the one browser only let me just close this now the API we are going to use is the login API but before that we have to create the user so let's go to create user and let's create a user let's create the user with sain tendar name sain middle name let's make it as R thenar mobile number let's enter some dumy mobile number typ email ID suchin at dm.com and password let's enter password as 13322 okay so we have given the email ID as Sachin dm.com and the password is 13322 remaining things I'm not pushing in right now let's click on execute right so it is uh the message we have got is true saved successfully and the ID also we have got now let's try this in the login API if we are getting login is successful this is a login API so let's enter over here and let's try to enter the uh wrong password let's see if we get the message like yeah so you can see if we pass the wrong user ID and password we are getting the error let's enter correct password 11 13322 execute now see if it is Success we are getting true login success and the token also we are getting now so this is the object we need to pass to the post API this is the login API is the post API and we need to send the particular field right so let's copy this let's go to the login component and here we need to create the object so login now since it is just a small project so I will create the interface so export or class I will create class login right uh what are the fields I'm going to need that I will create so this is the first field the data type will be string the second field is password again the data type will be string right so it is saying like it is not it doesn't have an initializer since it is a class we have to use the Constructor and in Constructor we will just initialize this property with empty this do password is equal to empty now the purpose of this when you create a class or interface you get a strongly type data right so login object colon now data type instead of any now you have created a class so instead of any you can use this right now we have to need the Constructor now in the Constructor we need to initialize this so we just need to initialize it by creating new instance login like this right so we have created a class along with the properties we need to send then we have created an object with the login uh class means data type and we have initialized that also next thing we need to bind this object to our login for form using NG model so to use NG model you might know in app model we used to add forms moduel but this is a standalone up component right so here only we need to import that so forms module right so again rule goes like whatever you use you use that you import that and use add that to the import statement now in the login page since it is in the form section so we have to use the NG model and the name attribute also so now NG model model login object dot see the purpose of creating class now if we didn't Pro if we have not created that class this at to complete won't come but now since we have created a class and that we have bed to this so to complete and strongly typing is coming properly right again we need the name attribute also name attribute become mandatory if your form is inside the form tag so let's copy this let's copy this also and this will be password same you need to put it over here right so first thing we have done object we have created that object we have binded now next thing is like on the login page let's remove the sign up and the orot password as we don't need it on the login page instead of submit let's make it button on click of login we need to call the API so let's write the function on login let's create this function right now in the login function we have to integrate our API call so to call the API right we need to use HTTP client so let first do that so in the Constructor we have to create the service of HTTP client we will get one error that will I will explain now if you remember to use the HTTP client we have to import just like the PO we used to import HTTP client model let's try that first so just like this common SL HTTP and here HTTP client moduel and this moduel will go over here right let's check if we get any error I think we should get let's check first okay suddenly it started coming proper okay currently we are not having any error but let's try now right so now in this login page we have to make the apaa call so either you can create a service also to store to keep the AP call or from component also you can make the AP call so this. HTTP do poost Post function post method will require two parameter URL and the object so URL will be let's go to Swagger and copy the URL So This is My URL so let's copy it let's paste it over here and second object will be login object the object we have to send now we have to subscribe to the result Rus colon any Arrow function right so here you just need to add an if statement if because from my API we are getting the object and in that object we have a result property so RS do result this property will denote like API success or not so if it is true then we can show just alert I'm showing login success and if error we will show the message we get from the API so in the result only do message property is there where you will get message right let's add a debugger whenever you are doing for the first time always make sure you debug the code check the data whatever data is coming properly or not so the details were suchin dm.com and the password was 1122 33 let's copy now here sech in and password 11 13322 right let's try wrong password now if I click on the login we should get a debugger now so you can see in the login object we have got the data whatever we have entered into the form right this is what I was talking about every every time whenever you debug the code you should move your mouse check what object what data we are getting in the object right let's add a debugger at line number 24 also once we get the response let's continue now right so now in the response it is coming false right because the password we have sent incorrect right so in the result you can see message also we have got so now since result property is false it will go to the S block and we have displaying the message now let's enter the correct password 1 one 3322 let's try login now right now your result properties true now we will show the alert box but if user is successfully logged in then we need to navigate right so we can navigate by creating from login component in this function we have to navigate to the dashboard so to navigate from TS obviously we have to make use of the router so private router the object will come from router right and here in the if statement if block this. router. naate by URL and we need to pass the URL once user is successfully logged in we have to navigate to the dashboard component this right so let's paste it over here now the dashboard component is a child of layout component so in the layout component I need to add the uh now bar and everything so let's go to W3 School let's use the basic now bar nowar let's copy this so now layout component will be your parent component after the login so here you will have nowar and here also again you will have router Outlet right again rule goes if you have to use something you need to import it so in the TS you need to use router Outlet this you have to import then only you can use it right so let's just save and check so after the login we have written the code that redirect to the dashboard so let's check what was that suchin at dm.com and the password was 11 3322 let's click on login continue login success then you can see we have successfully navigate to the but why dashboard is not coming properly so I think the link is not there properly but let's use the CDN directly something wrong with my reference so in the index.html for now I'm just sking my CDN directly so that we can see the naar properly still it is not visible why is it so so in layout we have added the proper nowbar okay now it is visible so now here you can see dashboard component loaded our parent component is layout now right in that layout dashboard component is visible right so this is how you should Implement your login page then again you here you will have all the links of the routes you will create and here you can have a logout button that will again redirect to the login page but make sure when you do the login like uh you should store the data whatever you get from the API and when you log out uh and means I mean store means you can use the session storage or the local storage or cookies also based on the requirement of your project you can use any of the three medium and in the log up button you should first clear the data you stored in the local storage or C Storage and then redirect to the login page this is how you should implement the login page in angular 17 right just the logic was this type of routes right so that's it with the current video hope these videos are helpful to you please do like subscribe in next videos I will uh do the implementation of Interceptor and again one more video with the local storage again with the angular 17 so that's it guys thanks for watching

Channel: LEARNING PARTNER

Views: 59,595

Keywords: angular 17 login, angular 17 login page, angular 17 login with api, angular 17 login with api integration, angular 17 login impelmentation, how to create login page in angular 17, how to create login page in angular, login page in angular, angular login page, angular login and registration, login page using angular, angular login authentication with api, login form in angular, login page angular, login authentication in angular, angular17 tutorials, angular 17

Id: Dvqe0uIhBxQ

Length: 28min 21sec (1701 seconds)

Published: Fri Jan 19 2024