Angular 16 User Routing Auth Guard Working Example with Code

Hello friends how are you and welcome back to my channel there is both myself Ajay and I hope you are doing great so friends in the video I'm going to show you the beautiful angular 16 with booster 5 for better layout and user routing oath guard working demo with that we can secure our routes according to user activity like logged in or logged out and guys before showing you working demo and code I must say please post a video till the end and please subscribe my channel for latest angular applications you guys here we go USC on my screen you can see the beautiful magnificent and for layout I have used booster 5. so friends first I'll show you the beautiful working demo here we go so guys now on my screen you can see two links on Apple home and account when I go to home you can see home component box run and go to account you can see login component box with login button now I'm going to click the login button now we are on our account page with user static information that I have used show the demo and also with logout button now I will click on this logo button and go back to home and when I click on account I see again the login component because I'm logged out if I'll assess account page directly but I'm unable because I am logged out to assess the count page I have to login again like now I can see the account page see the account page out as well so guys have you seen the working demo is working fine and now I will show you the few parts of code because I will share all the code snippet link inside this video description and you can Implement very easily in your application offense if you will have any kind of queries suggestion requirement that feed go back on this video also this protect me via my blog I will share uh the details and set this video description and guys now I will show you my code that I have done see guys here's my angular demo project in insert app you can see three components account home and login that I have made um component account now you can see my login component because I am logged out and login you can see my account account component so the three components and is the main file after compounded HTM file it's eight I have used my navbar and my routes see you guys that are really calm and account and here my router Outlet where all the component data will be shown inside container because I have used booster file and now you can also see Services users houses you can say this Services I have done the logged in Boolean value like false and true that I am sending login server Dot Login value will be true or false and user model.ts it's eight I declare the properties of for user like ID first name last name and username also one more success file Locker Services is eight I'm using my is loading value and user properties by default it is false and here I'm sending or saving the user data and the main thing is the routing see guys by default we will go to home page home router login router and account router with connective and orthodox auth card services which is logged in then insert pipe it's logged in true if not then we will wait to login and app.ts file is it default calling the components difference and now I will show you the component course performed by default all works and nothing here login HTML login page content and button with login click event click event clicked login services sorry login Services equal to true then I am saving the user data I can say the static user data but I will show you like ID last name and username and after it I will update to account and account page hey I'm getting all the user data with logo click event it component simple log out logged in is equal to false user value undefined and Navigator home page so guys have you seen it's very simple and like I said I will share the cost limit link inside this video description so no need to worry about costly but guys update I will come with the angular admin dashboard with the same out round card functionality and e-commerce set as well so sales again I must say if you will have any kind of querization requirement then feel free to comment on this video and also protect me via blog and I'm open a walk you can also assign me new projects as well and in the end I must say thank you for this video and guys please subscribe my channel and support me as well thank you again have a nice day

Channel: Therichpost

Views: 722

Keywords: Angular 16 User Routing Auth Guard Working Example with Code, Angular auth guard, Angular routing guard

Id: dGmHwOWzIiM

Length: 8min 10sec (490 seconds)

Published: Tue May 30 2023