Angular Crud operation using JSON Server with localstorage| Reactive form crud operation| FULL video

hello everyone today we'll be learning angular cred operation and the topic will be contact management system and here we'll be creating a credit app uh in contact management system project so uh I am in my empty folder so let us create a project first so in empty folder first I'll click View command prompt CMD and I hit the code with NG the menu management so we'll be creating the project which is our first step and this is asking whether we want routing or not yes we will require the routing I'll give yes so project has been installing now the packages I have been installing in our project so let us wait so our project has been installed so I'll go inside the project first CD contact information so I am in the right area now I will open the vs code directly from here Dot so let me open the terminal so first let me try to run the project so the project has been building so our project has been running at HTTP localhost 400 so let me run into okay this is the default one so let me remove the default one so I'll go to app HTML [Music] apart from this router Outlet I will remove everything and let me see so next step is we'll be installing a bootstrap here we will be not using any angular material or anything so using the simple push step we'll be doing a project so let's install the bootstrap so I'll go to stripe uh so the first official website I have to visit it again bootstrap.com so after visiting them I'll copy this link I'll go to my vs code I'll go to my index.html and above the headtech I'll paste the first link so again I'll go I'll copy this link and below the body I'll paste and Save so to cross check or boost step is installed properly or not and you hello and check we can see this is of boost type so boostable is actually installed now so let me remove this so I'll open a new terminal so here we'll be creating some components so our project is content management system so first very first component I will be creating is contact list so NG G4 generator C4 component and inside the component folder we have to create and that is contact list so contact list component has been created we can see here so I have to Route it now so I'll go to my app routing module.ts yes so let me set the routing for this so path will be contact list and the component will be a bit according to the path component will be yes contact list company so this got Auto imported when I fetch this yes we can see contact list works so routing has been set for contact list component so now I'll be working on this contactless component itself [Music] so first I need a nail bar here show in comments to understand it I'll write never so blue color neighbor I'll be using it so I'll be using new class equals to and never bar new bar expand these are all the booster classes you can learn if you want PG primary primary because we want blue color and then like I want a heading type before that I'll use a container fluid class equals to Entertainer fluid after that I'll use a H1 tag and I'll give contact management system correctly management let me save it and check now we'll be doing the changes now as of now it's not looking so good uh so on the H1 I'll give Style color I will require white itself [Music] font size Let It Be Someone around 24 pixel font size I'll keep 24 pixel and yeah and here I need one button add contact button that I will be doing so after that I need a button as well this is a bootstrap button simple one add contact so let me give class equals to BTN BTN uh success green color button I can use let me see so let this button be inside this tube so let me put this button inside another div so let me use this and Save the button is here let me see so let me make this name and Save so let me close that D over here somewhere around it so I take a table here and see so I think our container spelling is wrong so let me make it proper yes now we can see add contact so we require the image so let me name it as image section image section left side will be having the image container fluid I need a row class equals to row after that I'll use due plus equals to call sm5 and I'll take Duke class equals to image so a image I need actually so I have already image I'll give the link below so this link I have on the image so I'll copy this description I will be giving it gsrc equals to and this is the path of that image or a link so let me close this and Save so this images has come I'll be setting the CSS for this image so let me go to contact list component.css so dot standard pixel will keep foreign fluid okay uh here one table will come now I'll be creating a table so let me go to bootstrap so let me comment and give that table will come will be coming because we can understand it later table will be coming here so I'll go in I'll be going to the first thing of the get boot step official website so let me say which table we can take this simple one table borderless table I will be taking copy this paste it here let me see what has happened table has come below let me check okay I didn't give the row row I have given this class I have to integer so now I'll give the class okay new class equals to call SM Let It Be 7. and table or table thing I'll paste it here inside this so we can say instantly table has come here so little margin top I will do by says this one bootstrap class empty to let it be okay so next thing is uh changing this uh first I need first name and then I require last name and then we'll verifying phone number foreign and after that action might require so this is a dummy data I'll be removing all this thing extra I don't want from here okay this has been created so after this so now next is like add contact so let me let me create some components which are required in our project component [Music] and it will be so add contact component has been created so I'll keep the routing now so everybody model.ts logo first so here component after this I'll go to my contact uh contact list component and here I will be keeping a router link router link that is add contact so if I go click on add contact we can see I'm going to the add complete page so I'll be winding up this much only in this section so next video will be adding the contact here I will be creating the things to add the contact and we'll be looking on the validation part as well and after that we'll also be creating login logout as well so thanks for all watching this part one video thank you hello everyone welcome to the second part of contact management system project so last and last project last video we have learned how to make this page and we have also kept the routing on this and now we'll be designing this page so first I'll go to my ad component.html first we will do the designing part so here I need an image and here I needed box so let me remove this or default on so let me take a due first so I'll take class equals to container operate after that I'll take a row plus equals to row after that let me take e equals to um call SM 5 because the image will be coming at the left side so let me show me a space we want so let me take a class of our image div class equals to let me use the image type image SRC equals to so for the image again I have already one image link so this also I will be giving the description as I given in the first video as for that so this is a different one so class equals to image fluid a booster Plus after closing this lcu so we can see images come a little bit designer spending we can design it using CSS so I'll use this class image copy this paste in here I'm pasting it here so with values but with the Let It Be 600 pixel font size also not font size a margin top I need from Top will give 85 pixel and Save we can see from margin top now it has come down and with also has increased so here our form will come so again I'll go back and go back to HTML let me name here otherwise we will get confused we'll comment and keep image section and this is one of the image section so now next is form section form so section so here again I take due class of equals to call MD six booster plus a booster form will be using that we can copy and paste here let me use it class equals to card for that box after that uh heading I need add contact add contact and after that I'll use a row do class equals to or no after that uh here I I need the booster pump and CSS will be giving after that this will become properly so let me go step from so first link I'll go I'll copy this paste it here and Save okay it has come we will be giving the CSS as well so we need actual spacing so MB margin bottom I'll use mb1 and our first filter will be first name anyway not email first name the same thing will be replicating this L ring and I don't need this as well and further if we are doing validation we can do a different type as well this creative form validation or something else so okay so I'll let display text and they say don't need and here I will be giving enter name and I need a like a name I need for name first name last name phone number City so this was first name this is for last name almost let me change the name and this will be last name second will be phone number last one will be sitting so let me go to CSS part so here I'll give Dot card top Let It Be 60. percent left let it be 40 percent with I want 435 pixel um padding 31 pixel and 40 pixel transform Translate minus 15 percent foreign border also I need border from Pixel solid black so we can see our form after playing CSS right now for it right H5 is basically about this one add contact for that uh with Let It Be 600 pixel and marching top Let It Be 85 pixel okay margin top I don't need font size only as increase top is already given font size here I need a back button so again I'll go I'll take a due I'll put this inside this tube I'll take a class text Center so it has come here I need another button [Music] I'll copy this let it be back and let this be success space let me change okay okay A little merging top also I need empty to let it be again [Music] for this bike I'll keep router link let me see my router so it is like now we are in the add contact and this will be contact list so when I click on back we can see we are going to the this one quantity speech so we'll be using a reactive form so I'll go to appmodel.ts here let me import reactive form [Music] reactive forms model so this I will be copying and here I'll be pasting it below and let me okay let me cancel this now for every field we need a form control name form control name equals to for first one it is first name for everything will be copy for this it will be last name so here I'll be giving enter last name third one will be this I will act will be number it will be phone number and enter phone number phone number and here it will be City so enter settings and Save so here I need form group form group and it will be uh contact form this will be I'll be doing later because now we'll be getting error first we'll do in component side okay now first I'll import something so here Constructor I am not finding constructed here first implements on it let me copy so we are getting some errors okay and this one because ng18 was not there so this will remove so my form will be contact form so contact form group so I have to import something like Import phone Builder and all import form Builder foreign group on this boat I have to import and our Constructor also we need which is not there Constructor inside it private form Builder it will be formed so from at angular forms we are getting some error let me check let this be any private from Builder okay now either this one so our form is contact form so here this Dot contact form equals to this Dot form Builder dot group okay this is also our first thing is first name what's new so I'll also be using validators required over in V capital first name after that um it will be last name phone number and City last name this will be phone number and Lasting will be setting let me see you and I'll go to add contact.html and here from group contact I'm sorry so I'll be creating a function called it supplement contact so again I'll go here on this Summit part click send me quantity so this function will be using one click so in this part like we will be capturing the values only and next part will be implementing the Json server and the API part so here I'll consultancy dot contract form dot value I have to see the values so let me inspect I'll go to console so let me give some dummy value EBC here I am setting a little bit Mumbai and when I submit it's not getting submitting because I have been on click so it should be click so let me try again so let me try now so on click I change to click test send the main number and so form has been submitting but when we submit data is not resetting so again I'll go so here this dot contact form Dot reset values reset function to the center values and later let me check so let me give test VM test of food number okay when we say my data has been resetting so this is working fine so only this much for this video but so next video we'll be sending this data in the Json server and we will also be showing the data which we sent here so till then stay until next video comes so thanks for watching this video please like And subscribe so hello everyone uh welcome to the part 3 of content management system credit operation uh in the last part of the video like we have learned on how to create this both and like how to submit value and like when we submit a value um how to see in the console uh we have seen this so next part like we'll be doing the API part so first I'll go to my ADD component HTML uh so my form name is contact from so I'll disable if it is invalid this dot contact form dot invent so whenever values are empty in this box on this button will be disabled so when I type some values the time this button will be enabled so first um let me create a model so let me create contact model dot DS and I'll click on contact model.ts here so here export glass contact first name it will be string then I have last name after that I have phone number and City we have phone number and City phone number of type number and City type string and we'll also have the ID type number so we'll be installing the adjacent server so let me open a new terminal I'll go to my Chrome and I'll type first Json server after typing that first link I will visit foreign below you have to just copy this link and paste it here in that new terminal so first we will install the Json server so Json Center only has been installed then we have to run this command copy this and run this command and this will be running at localhost 3000 copy you can see it is running on localhost 3000 so now whenever we submit like I have to go to this page contact list page so I'll be going to the add component of TS so after submitting data I have to go there so private router router please and this gets Auto imported so here this Dot router dot navigate we need some path oh our pathos I'll go to the routing module.ts so now we are at add contact page and I have to go to the contact list page so I'll copy this here and let me save so let me give some dummy data test test foreign test when I submitted data I am going to this page content management the main page their contact list page so this has been finished so now the next thing is I need iepi so now let me open a new terminal NG G force and generate S4 service and serviceable API so our API service has been created you can see here so let me go to the appmodel.ts so let me import client model from at angular slash common slash so let me copy this HTTP line module in the import side I'll save it so let me go to my API service here private http client so this will get Auto imported so first we will be doing the post method post method and it will be add contact [Music] data data should be same as what we have done here content model that is this is contact so same content I'll use here contact I'm sorry contact model work imported so I don't need this let me keep it as contact only and this I'll remove import contact from let me fetch where it is present is Slash component so here our contact model has been projected so second thing is like I have to save here so here return this Dot http Dot post contact so we'll be using the Json server link of the post so first click on the post copy this and paste it here in the parameters data and let me save it so now let me go to add component.ts here private API API service so API service got Auto imported so this I'll comment and keep so on submit also here I need contact form dot value I need data that is of contact so this contact record imported from the contact model so here I need this dot API Dot add contact and it will be data and I have to subscribe the data if your response let me and let me copy this both inside you so it's throwing error because I didn't see you let me see okay let me check them out so when I put the data on like Let It Be comes phone number like epitome City Let It Be Mumbai and when I submitted data I am going to this page and we can see data has been posted so our post method has been working now whenever I post data all the data get post here so let me use the get function to render this data which is coming from here so let me go again go to the API service.ts so here let me write so let it be get contact return http Dot get we found it array so I have to get that data from the post so let me copy here and paste and let me call the API in the contact list page so let me close all the types so here in contact displays here uh so I have come here so first I have to like in the Constructor we have to call the IPS service which is printed first here you implements on in it and second thing I have to use ng1 in it NG on Inlet so I need a Constructor as well so here let me use Constructor private API EPA service so API service called Auto imported so let me so let me create a get haunted function get contact this dot API Dot get contact so let me subscribe take the response this Dot data equals to response so data I have to Define data that will be like undefined it will be the contact and contact will be getting imported from yeah related to contact array let me see and then I'll go to the list component.html so let me use the NG for Loop now so here I will be using ng4 Ng 4. let item of data so here it will be item root first name item Dot first name second one is item Dot last name third one is item Dot phone number and then item dot setting item dot City and here two buttons will be coming so for that buttons I have to use the font of some buttons so first let me go to app company.html not a permanent index.html so font awesome link I will be using I'll be giving you in the description below uh I have this Foundation link so let me copy directly and I'll paste here above and sleep and let me go to uh the contact list component so here let me use the font or some type buttons so I class equals to FPS if we edit and little space I want and this will be trash for delete and we need the button like I need a color also so let me look class directory here me color let it be blue and that another color letter for trash Let It Be delete and let me go to the component list contact list component.ts and I have to call this function in NGO unit in this Dot get contact and we can see that data has been rendering here so I'll show you again [Music] if you put a phone number City let me input and submit the data now we can say data is coming so our add contact and like display contact has been showing now it's been working so next video will be working on edit and delete and later we'll be looking for the login as well so as of now thanks for watching this video so stay till hello everyone welcome to the part 4 of contract management system alright so in last video we had learned how to add contact and how to display the contact and now in this video we will learn how to edit and how to delete this interest so first let me create a update content component so I will go to the new terminal so let me create a component generate component inside a component folder so new component will be created now inside our component folder so we can see uh update contact component has been created now let me Define the routing for this path update contact component update contact component so this got Auto imported so when I use update contact determine go to the update contact page so before this uh let me show how to deleting this so let me go let me close all this because we'll get confused first I'll go to API service.ts here let me make a delete method delete contact return this dot HTTP Dot delete contact foreign let me copy this paste it slash here ID number so here plus ID will come so let me go to um contact list so this is for delete so let me create a delete function on this click equals to so let me copy this paste it here start API Dot delete contact so here let it be ID number related by item.id let me subscribe response and after deleting let me alert contact detected successfully so after deletion before refreshing the page I want to get the data so I'll call the function get contact so let me test it we can see contact deleted successfully and contact has been deleting now let me work on edit so uh let me close this let me go to the app routing routing model.ts here let it be this Content ID not content update content here I'll be using the ID so on contact list so let me use router link update update content so here let it be item dot ID uh so you can see when I click on edit button we can see this ID number the number is coming or if I try to add in shoe all right let it be some number and City Let It Be and if I edit on here you can see the ID is coming three so let me go back so now I'll be using the add component this add component UI only in the update component so let me copy this paste it here let me remove this so let me remove all the form control name so let me create copy the same CSS and paste it here okay we can see the same UI has come now because we have replicated here I'll name it update contact update content let me name update so let me import forms module in Google search it directly I'll copy and paste an app module.ts copy and paste close it so let me let me close all this and let me go to API service.ts and this is for patch generator on it edit here I'll use ID number and below return this Dot HTTP Dot get contact let me copy this same and here plus ID and let me go back to update component.ts here implements on it so here let me use end unit let's see I'll use Constructor private API API service so it got Auto imported so we'll be also using the activated route but private activated route activity drop and it got Auto imported so here this Dot activated route so we also need to use params so let me use Paramus Dot params dot subscribe params I should use capital p so let me create a contact ID variable public contact ID and it will be F of number this Dot contact ID equals to Paramount so this Dot API Dot fetch data this Dot contact ID dot subscribe data the contact this is the same contact of the model and this will get Auto imported from the model itself here let me use the arrow function this Dot let me create another variable Market is contact data for public contact data contact equals to as contact data is equal to data so let me consultancy foreign so let me inspect first so when I click on edit now you can see and the details are coming so now I have to display here so let me go back if I click on edit here details of this are coming so let me go to the HTML part so here we'll be using a NG model so Ng model equals to contact data Dot first I mean and name equals to we can say when I brought this I can see the name so for all this we will be doing uh if I click on the second one you can see his name is coming so let me use for all of it last name last name phone number let this be City Distributing uh we can see all the entices coming all the data has been communicate so for update uh I'll create a function so copy this and content component dot TS let me paste so again I'll go to the API API service.ts and this will be for the update update data that is contact and I delete it real number dot HTTP Dot put contact same thing I'll copy data let me save it and let me go to upgradecomponent.ts so here this Dot EPA Dot update contact distort content data contact ID subscribe contact use Arrow function and after that I'll put a alert and after update I have to route to the contact list page so for that I'll use a router private part and this router got Auto imported this Dot round Dot navigate list so let me make it as update now you can see data has been updating if I edit and make him as deadly we can see it has been updating so our adding editing deleting and updating has been working so next video we'll learn how to create a login page for this so thanks for watching this video hello everyone welcome to the part 5 of content management system credit uh in the last video we had learned how to edit the data and how to delete the data in this video we will be designing the login page so first I have to go to my vs code I will be opening a new terminal so let me create a component NG and generate C for component inside component folder I have to create login sign up so our component has been created so let me set the routing for that so I'll go to approachingmodule.ts so let me give path component login sign up component got Auto imported so when path is blank oh redirect to login path Match full so whenever we come to the open the project whenever path is blank or whenever you start a project we have to go to the login page so if I go and just localhost from 200 it's not coming because here I have to give login but that's fine also you can see the first page whenever we run the project attempt is login page had to come so let me do now login and sign up I'll be designing and on the condition when login is open the time sign up will be added and when signup is open the time login will be added like that will be doing foreign so I'll take section class equals to 200. so let me take a container let me use 100 so let me take a row equals to rho so boot step plus again I'll be using justify content Center all right foreign Center align item Center so let me use due equals to call cell let me use the card row to do class equals to called MD 4 LG 6. so I have the image so I have the image link I'll be giving in the description below so first image link I will be copying and let me paste and let me use class equals to fluid so you can see image has been come so now we'll be doing the form side form section video class equals to call md6 call LG 6 . a length items and then enter Center so let me use due equals to the card body energy quite text black let me open so let me open Duo class equals to reflex and then item Center margin bottom three operating bottom one these are all bootstrap classes so I'll be using the font awesome Cube here so I have taken I class equals to face FP F3 2X so let me use Style Orange so you can see the cube so I'll be using span tag and it will be login equals to w so I so let me use the H by tag sign into your login login into your account so let me take a class w ow normal let me use the Style again I'll be using after class I'll be using the style latest spacing I need foreign equals to form outline so let me use the label equals to form level and the first field will be email address input type equals to email from control touch so see my replicate for the password now we can see here the field so let me design the button class so let me use a button class dark button and that is logging so when we don't have a account that time I have to redirect to the sign up speed Tech foreign account now let me your class equals to I let me take a anchor tag sign up here let me use the style so can color Let It Be black pointer cursor Let It Be pointer let me close the speed tag outside now we can see here so let me just first image fruit class we have given this class here in the image tag so height hundred percent let it be 100 percent border radius let it be 10 pixel foreign so in the section part background I have to change background image property I'll use linear gradient minus 2 25 to D7 zero percent nine all right so for card I'll give I'll begin the CSS border radius Let It Be 5 pixel again background image linear gradient okay you can keep any color which you want so for sign up now I will be doing and let me copy this complete sign so some things I have to change so first image I'll change I have the second one image and I'll remove the default one or default one which is already present so on condition I will be hiding which so this will be replacing sign up into your account so first I need a name email password so next I'll use and this will be name so replace this let it be already have account this I'll make a sign up so now let me use the foreign equals to so let me use the click function sign up so let me use uh ngf first in this section into NGM foreign because by default issue is false so this becomes true because this I have to show by default and for this I have kept issue because we have to hide it in the first condition so we can see the second one is writing so so we can see when I click here login disable and sign up comes so again if I click here login should come that I will do let me create a function all right click login this Dot so you can see this is working so next video hello everyone welcome to part six of contact management system correct so in the last video we learned how to make the UI of this uh in this video we will be working on how to implement this login and how to implement this and page so first let me go to my vs code so first I'll go to the divider.json so our project has been already running so this comments which is already present I will definitely check to sign up so because we need a sign up I'll save it let me go to the login component.ts before that I have to go to this contact model.ts so let me take export class sign up so in sign up we have name email and password so name will be string next we have email uh email will also string then we have password let me save it let me go to the component.html let me put the placeholders for all the fields from login to everything so first here I need a placeholder enter your email ID let me copy right here let it be enter your password so it has come here um the placeholder I want to place order for these three Fields as well it will be enter your name here it is the same enter your email ID enter your password so next thing is I have to view the form control name for this signup so for first year I'll give form control name form control name equals to name let me copy same it will be email and last one will be password so I'll go to login component.ts so let me give your implements on it implements on init I'll explain some problem uh okay the interface has been enjoyed it has been used so I have to make use of Constructor so let me use private form Builder yes formula so form Builder got Auto imported I also need a oh wait let me see I require HTTP client as well private http HTTP client so this also got Auto imported so our form group name will be sign up form so let me use sign up form form group so from group also got a auto imported here so let me go to the HTML in the sign up section let me view the formula equal to sine of form let's show below here this Dot sign up form equals to this Dot form Builder Dot group so we have a name email and password so name validity does dot required foreign capital so next one is email same thing I'll copy and the last one is password so let me create a button let me give the function to the button in the sign up Let It Be submit sign up click equal to submit sign up I'll copy this go to login component.ts paste it here also here this dot http Dot post now here I'll make use of sign up because in our model.ts we have given the sign up so same thing I'll make use and after using that signup will be getting Auto imported so in the Json server the same signup link I'll copy which we have created in a db.json and paste it here and let me subscribe as well the response and wait uh I'm not subscribed I need sign of form value as well this Dot sign of form Dot value and after this I'll subscribe so response and then I'll alert user signed up successfully and I have to reset the form as well cell phone dot reset another thing is I will disable this button if the values are inverted so let me go use the property disabled equals to Dot sign up form Dot invalid so you can see it is disabled and the values are not 35 to 10 something wedges and every time it will become undisabled or unable so let me refresh and try with the value or name let it be changed boom let me sign up you can see user signed up successfully and if I check in the sign up you can see and this value is coming so by this we can sign up and after sign up the user should log in with the credentials that I will be working on now because whoever the user has been signed up the same user has to or login and visit to the contact management page so only that person can see the content management list page so that I'll be doing after this I need a login form so let me go to contact model.ts [Music] port class login but login we have only email and password same as copy foreign so let me go to the HTML part so this was the this was the sign up section below now this is login session so here login button and let me give the click given it will be login user so same let me copy foreign so let me get a form control name for email and password form control name equals to email and here form control name equals to password so let me go to login component uh yes and here I have to change so this will be for login to login form group distort login form goes to this slot from Builder dot group so I have the name and email um both I can copy here see you so let me go to login component.html let me use form group again I'll go to login command.ts so login logic will be writing in the login user itself so this Dot PTP dot get sign up for sign up login because we have login yeah Let It Be login let me check so here I'll be using the same let me subscribe corresponds so let me put a logic for my Gmail and password password so automatic const user equals to let me use find method so let me I have to check the condition as well so let me match it uh let me return a DOT email triple equals to this Dot login form Dot value Dot image and password equal to plus Dot login form Dot value Dot password so user is equal to login your email value and password value so after this check the condition user also then I have to alert successfully logged in this Dot login form dot reset yeah so let me use else let me alert user unlock phone keys credentials so if any problem in the server if I disconnect the server that time something went wrong I have to show server size some friends from right let me check all the conditions now reset button after this also I have to use yeah so after everything I have to use the reset button uh only mistake I have done I guess here it is email and password I have done name and password [Music] in the middle just letting the password so let me check now uh let me use the proper values I'll copy this password is js123 J ish one two three you can see it's taking the value if I copy the email and type any wrong password something like this something wrong password determines that user not found with this credential and if I stop the server let me check if I stop the server copy this paste and type some password it's showing that something went wrong try after some time so all these three conditions are working now so let me start the server once again addition server watch tv.json so let me use private router so this code Auto imported router so here this Dot router dot navigate now it will be contact list let me try so let me copy this okay now we can see we are going to the page contact list page so here I need a logout Button as well so let me contact go to contact list stable do let me copy this is actually build logout let me use the warning yellow button this is the push type so if I use logout button you can see main page so thanks for watching this video hello everyone welcome to the part 7 of angular content management system correct so in last video we had learned how to login and sign up the user and this video we'll be learning about the Earth guard as well as local storage so first I'll come to my new terminal now project has been running so let me hit the command Ng generate guard shared author so we will be protecting the pages now you can see I am the login page and if I type contact list I can go directly to a contact list page but this should not happen actually so I have to protect those pages if the user is already logged in or proper user is being logged in that time only I have to allow the user to login in the page so it's asking us the options so I'll give the connectivity only first one so in the shared folder auth card has been created first let me go to the login component login signup component so like this I have disabled this button when values are values are not present I have to also disable the login button when no value is given so here is our login so let me use the disable property a disabled and this Dot login I have given login form okay login form Dot invalid so whenever values are noted uh not there the time this will be disabled so you can see no values so this button has been disabled whenever the values come on this button becomes unable so route uh route card is being created so first I'll go to my routingmodel.ts routingmodule.ts and I have to protect these pages so without a user login I have to provide these three pages so let me give can activate inside what Auto imported same I have to give for all the pages not all the pages three pages so I can copy this you can save so after this I have I should work on the local storage first now because I have to receive the data in the local storage and after that I have to put the logic so let me go to my signup component.ts here so let me give storing data in local storage so when your user is uh like a user is logged in that time I have to store the data in local storage loading in local storage so let me use the property uh let me use the local storage and Dot so I have to store so I have to use set item it will be login data so let me use Json Dot stringify and it is user so let me check now um let me open localhost 3000 this I will inspect and keep so I have to open the application here the data will be coming in the local storage so for sign up I have registered this user you can see in local storage data is coming so let me now manually remove this data yeah and on the logout I will remove the data so I'll go to the contact list component.ts so I can see the logout button let me check where is the logo button here our logout button is so let me keep the click function click equals to logout so I'll copy this log out so let me use local storage dot remove item and it will be login data so by this we no need to remove it manually so let me show again when I got instantly logged in got stored in local storage and if I log out we can say data is going to understand local storage so on this condition let me protect our routes so I'll go to the oddguard.ts where I have created here so let me give the condition here itself so if local storage Dot data item login data that time I have to return it true else it will be false and will be in login page else this dot so I have to use Constructor as well so let me use here Constructor nothing Direct router so router got Auto imported here so this Dot router Dot and navigate and it will be false so this else condition tells us if we type the any routes directly that time I have to return to the home page itself that is login page so let me check now so now value is not present in the local storage as per the condition and if I type directly contact list page you can see we can't go to the quantity speed and we are going to again home page itself so if you want we can alert also foreign [Music] page without logging so we'll understand it better so let me try now contact list you can see you can access this page without logging so let me log in now again storage and if I want to directly go to the add contact page we can go because we are already logged in so by this we came to know like how to use the router route and protect using the other how to project these pages and we also came to know like how to store data in the local storage so thanks for watching this video please do like and subscribe hello everyone welcome to part 8 of contact management system credit so uh in this part we'll be learning how to create a 404 page not found so whenever we uh like whenever we insert a wrong any path anything that time I have to redirect to the page not font page so this will be our last video so first I need to create a component first generate component inside component folder I have to create page not found so our page not found a component has been created you can see inside the component Builder we can see page not found so let me close all this so first I'll go to my approachingmodule.ts protein model.ts foreign path component page not found component so page not found component what you want to import it so if I try to put any wrong thing we can say I am going to the page not found okay anything if I put wrong I will be going to the speed only page.com only we are doing it uh in our budget so let me now design using HTML CSS so image already I have so let me delete this I'll be using image tag SRC equals to here the link will be coming and let me close it so for this I have image link already this also I will be giving the description let me paste it inside this let's see and we can see yeah for not four has come so again we have to design now so let me take class let me take H1 Plus first I have to take H1 from the inside I'll give a class and let it be error text error text last name so heading will be like oops we can't seem to find thing to find the resource new looking for looking for so let me take a P tag here it will be please check data website address is spelled correctly or not that I'll be writing please check update team website address is spelled correctly or not for this also I have to give class so class equals to text so let me take a due now I need button here so I'll take a anchor tag uh here let it be error and the button will be back and I'll keep my router link as well it's not capital adopted link equals to right and it will go to our login page plus I will give you vtn so this will look different because I haven't even cssi so let me go to please Note phone component.css so first for image tag and block margin left Auto margin right or two so this has come here in the center so now for button text align Center next will be for text align will be Center the font size 20 pixel margin bottom partition we can see here so next for error text align Center adding 20 pixel font family I'll give you cursive you can see font has been changed next thing will be for this error error text has been finished now before this class Dot error so first I'll give font family oh sorry I have font family Let It Be a Roboto font size I want it to be one point by adding text decoration none adding 15 pixel okay background refresh six two zero zero [Music] color border radius 10 pixels let me name this as btn1 because BTN itself is a boosted class so it also had a changes between one and then let me check as we can see back button also has come in the center now and 95 plus back you can see I'm going to the login page if I enter any wrong routes I'll go to the spawner for pitch so this completes the entire content management system project so thanks for watching video please like And subscribe the video thank you

Channel: G-web development

Views: 861

Keywords:

Id: -dCFtNl9bTo

Length: 152min 58sec (9178 seconds)

Published: Sat Apr 29 2023