Angular 14 Functional Router Guards: What They Are & How to Use Them

In this video, we're going to be discussing Angular 14 Functional Router Guards. What are they, and how can you use them to build more robust and efficient Angular applications?

Angular 14 is a big update, and with it comes some new features that we can take advantage of in our applications. We're going to be discussing some of these features, and how they can be used to create better and more efficient Angular applications. So make sure to watch this video, and learn everything you need to know about Angular 14 Functional Router Guards!

In Angular 14 the CanMatch guard is part of the release, which is a very useful guard and gives us even the possibility to replace the combination of CanActivate and CanLoad guards. Don't miss this part in the video!

✨👉 CanActivate: Restricts access to a route based on who the user is. If for example is not authenticated we should restrict access to that route

✨👉 CanActivateChild: This is similar to the CanActivate with the difference that runs before any child route is activated.

✨👉 CanLoad: While we can use CanActivate to prevent an unauthorized user from accessing the Admin section, this doesn't prevent downloading the lazy module. We can prevent downloading a module using the CanLoad guard

🔥👉 CanMatch: This guard detects if a route is about to be activated and prevents even the activation of that route. Please note that this guard runs before the CanLoad and as such, we can replace the combination of CanActivate and CanLoad with CanMatch

Chapters:
0:00 Intro
0:40 Understand the project
2:45 Understand when the guards run
7:33 CanActivate Guard (Class)
12:03 CanActivateChild Guard (Class)
13:32 CanLoad Guard (Class)
15:09 CanActivate Guard (Functional)
19:00 Class Vs Functional implementation
19:50 CanLoad Guard (Functional)
20:13 CanMatch Guard (Functional)
23:24 Thank you

******************************************************
Let's Connect
******************************************************

#angular #learnAngular #angularTutorial #webdeveloper #webdevelopment #angularrouterguards #angularguards #routerguards

[sachinlagamuwa]

The explanation is very clear and very constructive. Thank you so much.

[maryIfycode]

I will like to get a course where you teach Angular from beginning to the end. You explained this so well. Thank you ❤

[TheCMajorth]

loved the canMatch on loadchildren, canLoad :D very useful! and more performant TY !

[zeynalalakus]

Thank you very much for these great explanations :) Looking forward to watch new videos.

[pskabdulnawaz]

Awesome content and always something new to learn in Angular!. Really appreciate the content. Thank you for all your hard work in making this content fruitful to Angular Devs :)

[WingofRado]

I watched every movie :) Great stuff. Not only clarification of complicated topics with real world examples, but also things which was provided in new version of Angular. Excellent work.

[Kwuasimoto]

Brilliant explanation! thank you very much 🙂

[dixitbafna]

Great Job. Can you also create video of LazyLoading of Modules and bootstrap that component in another component and not with Router Lazy Loading.

[OlehBiblyi]

Thanks for sharing, interesting about same path.

[aram]

Would you consider showing how to correctly unit test functional guards that use inject()?

[jinglei-xtne]

Thank you very mucu for the video! I had a little question, what plugin do you use in vs code for the auto complete and auto import ?

[TheSysmat]

what would be the best way to unit test this guard functions?

[NDdesign]

Good content, but had to watch over 35 commercials :/