Angular Guard - How to Use Functional Router Guard

Learn Angular guard in a functional way which is a new way to protect routes in Angular. Previously we used class guards but now they are deprecated and we must use Angular guard functions instead

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
0:20 Angular class guards are deprecated
0:50 Angular functional guards

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[Fischly]

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

[vadimr]

Clear and informative as always, Thank you.

[rembautimes]

Thanks - was stumped by this and appreciate your explanation

[jaredbecker]

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!

[ellegre]

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

[cckb]

Thanks a lot for this video! Helped me

[mikhailsmirnov]

Thanks a lot! The Monster is the best!

[bijum]

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

[chrisb]

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

[g-luu]

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

[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 :)

[mikhailratner]

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

[ThanHtutZaw]

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

[fundevelopment]

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

[kolan]

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);
!== null) { router.navigate([‘user’]);
}

return true;
}
What I doing wrong?

[anutaNYC]

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

[waleedsharif]

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