Can Activate guard | Guards in angular | Angular 16

Подписаться 2,8 тыс.

Просмотров 14 тыс.

50% 1

In this video you will learn
1. Angular canActivate guard.
2. canActivate Guard in angular 16
3. Activation guard in angular 16
4. Angular 16 Guard in angular
5. Route Guards in angular 16
6. Router Guards in angular 16
7. Functional and Class Guards in angular.
Github
github.com/saikorthivada/angu...
Guards introductions
(Router Guards | Guard Introduction | Angular 16)
• Router Guards | Guard ...
Signals, Effects, Observable and computed properties | untacked method | Angular 16
• Signals, Effects, Obse...
For angular 16 Features and migration, Please check the below
• Angular 16 features wi...
For Angular 15 features, Please check the below
• Angular 15 features | ...
Angular Standalone components | Ways of using standalone components | Angular 15 | Stable release
• Angular Standalone com...
For Angular 12 features, Please check the below playlist
• Angular 12 Features
Basic Software concepts
• Playlist
For Angular Unit Testing, Please check the below playlist
• Angular Unit Testing
To know how to test basic patch value in angular watch below video
• Angular Unit testing- ...
Medium:
/ techshare-skk
Address management Angular Tutorials
Part 1 - • Reactive Form - 17 | A...
Part2 - • Reactive Form - 18 | A...
Part 3 - • Reactive Form - 19 | A...
Part 4 - • Reactive Form - 20 | A...
Part 5 - • Reactive Form - 21 | A...
Part 6 - • Reactive Form - 22 | A...
Part 7 - • Reactive Form - 23 | A...
Mandatory to watch before watching unit testing for better understanding:
(Reactive Forms Part 16 | Form Arrays removeAt method | Dynamically remove control from form array)
• Reactive Forms Part 16...
Recommend you to watch my previous videos for more information and the context.
For testing form control without any validation watch below:
• Angular Unit testing- ...
For testing, Template driven forms
• Angular Unit testing- ...
For template and template context
• Angular Unit testing- ...
For Attribute Binding testing:
• Angular Unit testing- ...
For Testing style bindings:
• Angular Unit testing- ...
For Testing class binding
• Angular Unit testing- ...
For Testing property binding
• Angular Unit testing- ...
For interpolation unit testing
• Angular Unit testing- ...
Different Types of Data binding
• Angular Data Binding |...
Interpolation in angular
• Angular Unit testing- ...
For Component introduction check the below link
• What are Angular compo...
Angular Installation and setup
• How to Configure Angul...
For ng serve mechanisum and internal flow of angular follow the link below
• Angular internal work ...
Angular Modules
• Angular Modules | What...
Angular Tutorial playlist:
• Angular Tutorials
Medium:
/ techshare-skk
For Angular 12 features, Please check the below playlist
• Angular 12 Features
Basic Software concepts
• Playlist
For Angular Unit Testing, Please check the below playlist
• Angular Unit Testing
Instagram:
/ tech.share.skk
#angular16 #angular #authguards #routeguards #latestversion #trending #angularrouting #trending #updates

Наука

Опубликовано:

15 июн 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 72

@generalplimskye5444 4 месяца назад

This was extremely helpful, thank you! I was a bit lost when they deprecated CanActivate and didn't understand how the replacement was supposed to work. This video answered my questions.

@techshareskk 4 месяца назад

Lovely 😻 you would get more and more information the same way even in future

@glenyrodriguez1402 10 месяцев назад

Great comparison between the class and fn guard. Thanks a lot!

@techshareskk 10 месяцев назад

✌️

@marypaul9627 8 дней назад

Excellent!

@techshareskk 7 дней назад

Thank you 🙏

@alanm.c.4218 10 месяцев назад

One of the best i saw so far , thank you so much , very well explained

@techshareskk 10 месяцев назад

Thank you 🙏

@awaraamin6850 4 месяца назад

I say the same "extremely helpful" especially the last bit! THANK YOU

@techshareskk 3 месяца назад

Glad it was helpful!

@divyadineesha389 Год назад

Ur teaching is awesome!...very helpful......

@techshareskk Год назад

Thank you Murugesh ✌️✌️

@purplemoon6258 Год назад

Ty so much!!! u are the best!! 🚀🚀

@techshareskk Год назад

Thank you 🙏 will try to make more and more videos dedicated for all of you ✌️🥰😍

@ananthsview8034 10 месяцев назад

Nice explanation, Thank you bro

@techshareskk 10 месяцев назад

🙏✌️

@patrickkabuga4945 11 месяцев назад

Thank you!👏

@techshareskk 11 месяцев назад

:-)

@luisdavid9720 8 месяцев назад

Muy bien explicado

@techshareskk 8 месяцев назад

Thank you so much

@akhmadfauzan2739 10 месяцев назад

thank you sai

@techshareskk 10 месяцев назад

🤝

@gusschafferr 11 месяцев назад

Gracias!!

@techshareskk 11 месяцев назад

✌️✌️

@songholic2341 Год назад

Nice one Brother it worked fine

@techshareskk Год назад

Good to hear

@hidekiryuzaki6705 10 месяцев назад

sir tutorial to do this with lazy loading and admin routing module with 2 router outlet

@techshareskk 10 месяцев назад

I dint get you can you please explain me in clear

@giorgimindiashvili3810 7 месяцев назад

thank you so much

@techshareskk 7 месяцев назад

Welcome 🙏

@user-ky7ij4lf9c 11 месяцев назад

thanks, it's very 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

@techshareskk 11 месяцев назад

Thanks 🙏 bro

@raghuvirkhamal4514 11 месяцев назад

very nice bro👍👍👍👍👍👍👍👍👍

@techshareskk 11 месяцев назад

Thank you bro 🙏

@weixiangng8279 5 месяцев назад

Mine works well but when refresh current page it quickly show the login page then back to dashboard page again. Why ya?

@techshareskk 5 месяцев назад

Then in that case try checking and use this activated guard on both routes login and dashboard

@rupeshSh832 7 месяцев назад

Sir when I am using router.navigate() and then error occurred " Property 'navigate' does not exist on type 'Router' i am unable to figure it out please help

@techshareskk 7 месяцев назад

Check how you are using it and which import you are using and check where you are importing from

@sebastiancollantes1458 Год назад

Wow, I just found the fix in 7min

@techshareskk Год назад

Super and glad to hear that ✌️✌️🎉🎉

@prabhuprasad3679 6 месяцев назад

when the token is available in localstorage and user tries to navigate to home, how should the user be redirected to dashboard page?

@techshareskk 6 месяцев назад

In your case you can directly navigate the user to respective page . In the video i have explained the default navigation to dashboard

@user-kj1pi7lj6o 10 месяцев назад

bro pls make a video on vblack screen

@techshareskk 10 месяцев назад

All the latest videos are on black theme itself from angular services. Please check my latest videos I have changed the theme now

@surendrapolepalli51 9 месяцев назад

Authguard is not working with browser back button. If you click on back button after logging in, it will allow the user to come back to login page again

@techshareskk 9 месяцев назад

No that should not happen . May be the logic what you wrote is not working as expected

@surendrapolepalli51 9 месяцев назад

Even you skipped the part, but I had to write a new logic for that. A direct canactivate guard will go into a loop. Thank you for the tutorial@@techshareskk

@vihanga01 11 месяцев назад

brother this help me a lot .. but i love to follow ur angular content step by step there r so many angular playlists idk which one to start

@techshareskk 11 месяцев назад

Got you! I have created individual playlist for all subscribers so the people can focus on the required playlist Here is the playlist link for you which have all my video’s Angular Tutorials ru-vid.com/group/PLmY2oBouT85bSbFOm0qfDDPiL1gryCjmB

@vihanga01 11 месяцев назад

❤ @@techshareskk

@pchintan243 10 месяцев назад

hello..it's useful but in angular16 how can i get the services because function not allow for constructor so i can't be able to use the service in function can you please help me?

@techshareskk 10 месяцев назад

You can use inject method to do that inside the functions i have explained it In some of the videos like below ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tFsCynatnlo.htmlsi=ZBN4jaGdIymhleND ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-atWo8aj_Bq8.htmlsi=Rtwm9yB10B2VsziL

@manikantareddy2385 8 месяцев назад

Hi can we implement canactivatefn and canmatchfn to same logic instead write two files?

@techshareskk 8 месяцев назад

You can do that as well. If you could give me a scenario i can confirm you with 💯 percent valid answer

@manikantareddy2385 8 месяцев назад

@@techshareskk I am implementing authorisation based on roles, so I have two routes like one is normal with canactive and second routes is lazy loading with canMatch.

@Naruto-wx1it 11 месяцев назад

thanks a lot i have work 2maro i studied in this thank u so much after login i cant able to redirect to login page again what to do for it

@techshareskk 11 месяцев назад

Can you brief your scenario

@Naruto-wx1it 11 месяцев назад

@@techshareskk i m not login but i can go in my url path of next components and i m nt logined in

@techshareskk 11 месяцев назад

In that case you have maintain proper condition in auth guard and based on that condition you have to return true or false. This guard can be used for all post login components

@rumiji 9 месяцев назад

sir when i added the canActivate:[authGuard] in the login component in the router the browser started loading what to do??

@rumiji 9 месяцев назад

like this : { path:'login', component:LoginComponent, canActivate:[authGuard] }

@techshareskk 8 месяцев назад

Can you please provide complete details about the issue ?

@rumiji 8 месяцев назад

like i used the same guard in the dashboard component - so if the logged in user tries to go becak to the login they should be redirected to the dashboard-(because they have token and they can only go to the login page if they press the logout button right? so when i added this guard the live server started loading and displaying token :null in the console - i guess it was because i deleted tghe token from the local storage @@techshareskk

@ArunKumar-tm1cj 7 месяцев назад

🫡🫡🫡

@prabhudeeshwaranganesh7257 4 месяца назад

can I just say CRYSTAL CLEAR !!!!

@techshareskk 4 месяца назад

Thank you 🤩

@nguyenvohoanglong3898 Год назад

how to use toast in my code. Thanks for your video import { inject } from '@angular/core'; import { CanActivateFn, Router } from '@angular/router'; export const authGuard: CanActivateFn = () => { //route, state const router = inject(Router); const infoAcc = sessionStorage.getItem('infoAcc'); if (infoAcc) { const token = JSON.parse(infoAcc); if (token?.accessToken) { return true; } } router.navigate(['/login']); return false; };

@techshareskk Год назад

What toast you want to show and when you want to show toast can you brief about that ?

@nguyenvohoanglong3898 Год назад

@@techshareskk i want to show toast when my token does not exist in sessionStorage

@nguyenvohoanglong3898 Год назад

@@techshareskk import { Inject, inject } from '@angular/core'; import { CanActivateFn, Router } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; export const authGuard: CanActivateFn = () => { //route, state const toast = Inject(ToastrService); const router = inject(Router); const infoAcc = sessionStorage.getItem('infoAcc'); if (infoAcc) { const token = JSON.parse(infoAcc); if (token?.accessToken) { return true; } } toast.error('invalid'); router.navigate(['/login']); return false; }; My show toast code is not working

@techshareskk Год назад

@@nguyenvohoanglong3898 as per my understanding your toast related code in app component If that is the case you have to create behavioural subject and update it when you don’t have local storage value 2. If you have a separate service for toast then call that to open as this is overlay it should show on the UI even if you navigate .

@nguyenvohoanglong3898 Год назад

@@techshareskk The above code is angular version 16. If version 15 just declare constructor (private toastr: ToastrService){} then use toastr variable without error