22. Design Auth Login Module in Ngrx Angular Application.

hi friends this is leela welcome to my channel we have did the post module right so we have did the current operations and also we have did the lazy loading and also we have included the for feature store module now let's try to implement the authentication module so that is nothing but the login and registration how we can do the authentication module using the ngrx state management now here i will be creating one new folder okay that is nothing but the auth and here i will create one file that is nothing but the auth dot module dot ts okay i'm lazy loading this auth module the same scenario let's go to the app routing here it is the app routing and here i will add it something like path of auth okay now go to the auth.module.ts okay export class auth module okay we'll be having the auth module and here i will try to add ng module i will convert this into ng module right now the app routing module if it is auth load children okay so this will take an method so that is nothing but the input of something like auth slash other dot module dot then it will return a promise so dot then you can write it something like dot then m m dot auth module okay so we have added a route for the auth now let's go to the auth module and here what we'll try to do is so here we'll be having the imports it will be array and here you'll be having the declarations which could be the declaring of the components and i will declare the constant routes here of type routes is equal to it will take an array and here i will write it path empty and here i will write it load children directly sorry not root children children so this one will take an array and here what i will try today is path of empty okay i will add redirect to to login okay so redirected to login now here i will have another one that is nothing but the path of login okay and i will try to load the components before loading the component what i will try to do is i will try to create a component login component ngc auth in the auth create login component okay so let's create the login component here we will write add component it will be equal to now here it is created login so we will be able to get the login component we have added the login component here and now what we'll try to do we will try to import this one so here what i can write is router module router it will be for chilled for child of routes okay and here where could this auth module is newer okay compare oh sorry now if i go here in a fair refresh don't you okay auth module oh yeah login content has been included okay so our code everything is gone okay fine um we'll write right constant rows or otherwise we'll try to do yeah we got everything right so here declarations will write it login component okay so declarations and inputs is completed now what we can do here so here we need to add the input common module also right common module so we need to import the common module also so first is first everything is completed now let's try to add it in the header component the navigation links so here i will try to take one li here and i will paste one li and here i will be having the login and here sign up and this one will go to the slash so slash art means it will be related to the slash slash login so here i will create slash auth slash signup we will create it afterwards this link on these components now if i go here and if i click on login so it went to the auth login and login works is working so we have successfully set up the sign up is not there so right now we have only the auth slash login so login has successfully lazy loading is working now i can go to the logincomponent.ts let's go to the logincomponent.html and in the auth module let's try to add the reactive forms module okay reactive forms module i had a reactive forms module and in this one what i will try to do is dot road dot col mark 12 or otherwise dot sorry offset if an md iphone 3 so here i will try to add the form okay and here i will be having h3 login so this is all comes under designing thing okay hr and in this form what i will to do is do class is equal to emb iphone 3 and here i will be having label of type email and here what i will try to add is input type is equal to text and class is equal to form control okay so now i have the email in the same scenario i'll be having the password also so here mpf and three and i will keep the password and here what we'll try to add is you'll have the password and here you'll be having the mp3 again and here button sorry button type is equal to submit and the class is equal to b btn space btn hyphen primary okay so this is the button now if we try and if i go here so error parsing so some problem has been came what it is saying only wide and final can be self closed what is happening here okay sorry so this one is the button right what is happening here yeah so here i can write log in button if i try to see here if i go to login it's not working why it's not working let's try to see the console if i go and if i try to see the console yeah i'm able to get the output node injector something is not fun okay fine so now what we'll try to do is let's go to the login form here and i will add here login form of type form group okay so in the ng on it what i will try to do is so let's import this form group we need to declare the form group so there is a reason we are getting a login form is equal to new form group off we will have two things that is nothing but email it is a new form control of first time it will be empty and here we can add validators dot required and another one is the validators dot email okay so if you want you can write your own validations if you want so new form control of mt and here you will have validators dot required and validators sorry we'll have the only password right well let's require and we'll try to add this login form into the login.html and here i can add form group is equal to i can attach this login form and here i can have form control name is equal to email okay and another one is the form control name sorry what i have written here form control name is equal to password okay so these are the two things so now if i go if we go to the login if i go into the login now i am able to see successfully the login form so now what i will try we will try to add the validations also there so that so that everything will be completed here so i can write here do star in gf we already know about how to write these all things in gf is equal to what is your login form right login form dot get off email okay dot touch and login form dot get off email dot valid if it is not valid then go into this due and check for for another violation star ngif is equal to login form dot get off email dot errors dot required if it is required you can write email is required okay or otherwise do invalid invalid email we can also write this one when we can write this one we can copy this one all condition and here we can write email okay in the same scenario we can take we can take this all in give condition and for the password we'll try trade it here in the further password is if the password is touched and the password is not valid then if the password or errors dot required is there so we have only one one right so we can remove this one and we can write the password is required if you want you can also remove this one also okay now if you want you can also remove why because we have only one validation there is no need of this one so now it is completed now here if you want you can write disabled is equal to not of login form dot valley okay so now i go here if i refresh this one so now this one is disabled now i can write here and if i come here invalid email okay okay so i can remove this one all so i can write some leverage here okay it has become valid and the password is required if i remove i can able to log in now what i will try to do is here in the same scenario ng submit on login or something whatever unlocking submit method now here i can and i can write here on login submit and here we can console.log okay this dot login form dot value okay so now if i try to check the output so on login submit so now nothing will come i think yeah now i can write some gibberish here and i can write here and if i see i'm able to get the output now in the next video what we'll try to do is how we can submit this one to the database let's try to see it in the next video so we have designed the login form in the same scenario we'll design the signup form also but first we'll try to successfully login how we can do the login through the state management we'll try to see if you have any doubts or any decisions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 14,929

Keywords: angular, angular ngrx, angular tutorial, angular input output, angular emit event between components, angular emitter, angular eventemitter, angular eventemitter tutorial, ngrx store, angular state management, ngrx store angular, ngrx selectors, ngrx tutorial, angular forms tutorial, props selectors, ngrx props, selector props, learn ngrx angular, ngrx forfeature, ngrx store tutorial, angular ngrx tutorial

Id: mg9PQ5SL6YI

Length: 12min 39sec (759 seconds)

Published: Thu Dec 24 2020