CanDeactivate Guard in Angular Router (2021)

Before I start to explaining CanDeactivate Router Guard in Angular I would like to ask you if you have ever had a situation when you filled out some complex form and incidentally moved away from it before the data was saved? Do you remember that terrible feeling when you realise that the data you entered is gone? This is an example of bad UX and CanDeactivate Router Guard is a solution which can help your users to avoid this situation. In this video you will see how to combine your CanDeactivate guard with Angular Material Dialog and how to make the guard reusable. Thanks you for your attention and enjoy watching!

📣 Become a Pro in Angular Material Theming (Advanced Workshop) 📣
https://bit.ly/angular-material-themi...
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)

📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
https://bit.ly/complete-hasura-course
✅ 20%-off coupon code: HASURA-EASY-START

Time Codes:
00:00:00 - Intro;
00:00:28 - What is CanDeactivate Guard;
00:01:13 - Use-case for CanDeactivate Guard;
00:02:30 - Intro to the initial Project;
00:03:47 - What we are going to implement?
00:04:38 - Let's implement a basic CanDeactivate Guard;
00:12:27 - Bind CanDeactivate with Material Confirmation Dialog;
00:19:01 - Refactor the Guard to make it reusable;
00:25:08 - Outro;

🔗 Link to the source code on GitHub:
https://github.com/DMezhenskyi/angula...

#angularrouter #routerguards #candeactivate #webdevelopment #angulartip