Angular Guard - How to Use Functional Router Guard

[@MonsterlessonsAcademy]

WATCH NEXT: Angular Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/a3LCin6ii7yAhtEsi=2DCn7yspEAAJ2H6l

[@Fischly007]

Came back to this after seeing it a while ago, and it was exactly what I needed on this cloudy Wednesday (my dude) 👌

[@MonsterlessonsAcademy]

Hope you enjoyed it!

[@emmanuelU17]

Brief and straight to the point

[@MonsterlessonsAcademy]

Thank you!

[@vadimr5847]

Clear and informative as always, Thank you.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@bijum777]

Good job. I am becoming a super follower of your teaching. Keep posting more and more informative videos

[@MonsterlessonsAcademy]

Thank you, I will

[@rembautimes8808]

Thanks - was stumped by this and appreciate your explanation

[@MonsterlessonsAcademy]

Glad it was helpful!

[@mikhailsmirnov8539]

Thanks a lot! The Monster is the best!

[@MonsterlessonsAcademy]

Glad you like my videos!

[@chrisb3902]

Great video! I was unaware this changed for version 15!

[@MonsterlessonsAcademy]

Glad I could help!

[@ellegre6546]

Thank you so much! I fixed my function and it works now.

[@MonsterlessonsAcademy]

Glad it helps!

[@jaredbecker3152]

I was struggling with this for a while and could not figure out what I was doing wrong and then you said "It must return an observable of type boolean" and then it clicked. I was just returning true or false based on a call I made to a service. Thanks so much for this!

[@MonsterlessonsAcademy]

Glad it helped!

[@user-cc8kb]

Thanks a lot for this video! Helped me

[@MonsterlessonsAcademy]

You're welcome!

[@g-luu]

Great tutorial. How would you mock the service inside this guard function?

[@MonsterlessonsAcademy]

I didn't try that yet.

[@fireflysemanticsmedia6267]

Awesome - Thank you so much!!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@fundevelopment5223]

The app crashes when I invoke router.navigate(['posts']) without showing errors , why?

[@spacedust8061]

Thank you so much!

[@MonsterlessonsAcademy]

You're welcome!

[@kol4an721]

Guys, please help I write registration and create guard and if I provide these guard in CanActivate to 2 components UserComponent and LoginComponent So my page have been freeze and nothing working Guard code: const loginGuard:CanActivateFn = () => { cont router = inject(Router); if(localStorage.getItem(‘token’) !== null) { router.navigate([‘user’]); } router.navigateByUrl(‘login’); return true; } What I doing wrong?

[@11ujujz47]

You should return false after router.navigate

[@riketscience]

You are my favourite explainer and I always come to you first to help my angular/rxjs journey. One thing on this occasion: please note that "guard" is pronounced like "hard", just swap the consonant. So sounds as if it is spelt like "gard". You can forget the silent "u". Stupid English! Keep up the great content :)

[@MonsterlessonsAcademy]

Yeap English is difficult. I will try my best.

[@riketscience]

@@MonsterlessonsAcademy the language of software you seem pretty much fluent! 👌 Right now I'm trying to let a guard be determined by the result of a login modal. Having a bad time trying to work out if it's even possible. So instead of routing to a login page, if not logged in the guard would hopefully intercept this, bring up a login modal, and then if login successful the canActivate would return true and carry the user on to their original required route. Possible? Argghhh!!!

[@mikhailratner4649]

Thanks for the video! Can you elaborate on what you've said regarding the reason of Angulars Dev Team to switch to functional guards?

[@MonsterlessonsAcademy]

It is only my assumptions but Angular team tries to make Angular easier(?) / similar compared to React. We got functional guards and standalone components. It looks like Angular goes in functional direction. If at some point we get functional components then it is React clone.

[@mikhailratner4649]

​@@MonsterlessonsAcademy I guess I am not advanced enough to answer this question well, but what I know is that Angular's Dev Team wanted to get rid of module since 2017. It was useful back when Angular 2 dropped, but now it is not necessary anymore. Anyway, I find that standalone components definitely make it easier to structure apps and it makes more fun to work with Angular, which is a good thing for Angular developers and even better for those who are learning it.

[@MonsterlessonsAcademy]

@@mikhailratner4649 I agree but my problem is that ngmodules are not deprecated so I can't be 100% sure that if I write new project or course to teach people I must tell them that this is the new way of writing ng apps.

[@mikhailratner4649]

​@@MonsterlessonsAcademy I think you can confidently switch to Standalone components in your lessons, since it is the preferred way for the Dev Team and many other popular Angular Developers. There is no imminent need for the Angular Dev Team to deprecate the modules (maybe one time they will) but since it is easy to migrate a "module" app into a standalone app, I think most projects will make the switch.

[@MonsterlessonsAcademy]

@@mikhailratner4649 Thanks for the info. I rechecked official standalone video and they said exactly that modules become optional.

[@sarahibrahim8943]

thank you so much

[@MonsterlessonsAcademy]

Welcome 😊

[@ThanHtutZaw3]

in functional guard , I don't get currentUser . Instead I only get undefined (always) .

[@sergiodesousafilho]

obrigado, ajudou muito! monstro!

[@gangadharkaja2132]

Theme and Font Name Please?

[@MonsterlessonsAcademy]

Gruvbox. Monaco

[@anutaNYC]

Almost begs the question why not just use react at this point?! They are making angular more and more like react..

[@MonsterlessonsAcademy]

There are pros and cons. For example Angular supports ts out of the box which is why all libs are written with ts. In React it depends. Also Angular Material and CDK are supported with every update of Angular and we don't have similar alternative for React where you need to look for specific libs which are often abandoned.

[@anutaNYC]

@@MonsterlessonsAcademy I personally love angular and worked on it last 5 years but it seems they're really pushing for react and ife seen and coded using TS fr react, even though it seems to be very painful. Your videos are very helpful, thank you

[@NH-yv7im]

Hi

[@MonsterlessonsAcademy]

Hello

[@waleedsharif618]

Are people still using Angular ? I beliebe nowadays its just Reactjs ?

[@MonsterlessonsAcademy]

They do. Just open any website with vacancies for a big city.

[@waleedsharif618]

@@MonsterlessonsAcademy even new github co pilot based on gpt4 was trained on reactjs…

[@Almighty_Flat_Earth]

Angular is the matured professional framework, it has simple syntax than react. React is hard to understand, the DX of react is horrible. React is a child play. When it comes to serious enterprise app development, Angular comes in glory. React has brought shame to JavaScript community by making web development unnecessarily complicated.

[@Almighty_Flat_Earth]

React js is a blasphemy to JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated. Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening. Svelte and react have confusing code. Developer experience matters.

[@idontwhy3132]

lol @ flat_earth, but true facts

[@rudrakhuntia5583]

thank you so much.

[@MonsterlessonsAcademy]

You're welcome!