Posted on Sep 7 As developers, we often find ourselves adapting to changes in the tools and frameworks we use. Recently, while working on my Angular project, I stumbled upon a significant shift in Angular 15: the deprecation of class-based route guards like CanDeactivate(). In their place, Angular has introduced functional guards, providing a more modern and flexible approach to managing route deactivation. In this article, I'll guide you through this transition and share how you can smoothly update your codebase. ✨In previous Angular versions, we used the CanDeactivate() guard to handle route deactivation, implementing custom logic to determine whether a user could leave a particular route. However, Angular 15 introduces functional guards as the new way forward. This change aligns with Angular's mission to simplify and enhance the development experience.1) Create a Functional Guard: Start by creating a TypeScript function that acts as your functional guard. This function should return true to allow deactivation or false to prevent it.2) Implement the Functional Guard: In your routing configuration, use the canDeactivate property to specify the functional guard for a route. Employ the () => syntax to reference your guard function.3) Customize Your Logic: Inside your canDeactivateFn function, implement the logic that decides whether deactivation is permitted based on your specific criteria.Alternatively, you can use an injectable class as a functional guard by leveraging the inject function. This approach keeps your guard logic separate from your routing configuration, especially for the case you have your custom component such as Dialog component.By embracing this change in Angular 15, you'll find your route guard implementation becomes more streamlined and adaptable. For detailed examples and additional information, refer to the official Angular documentation.Change in the development world is inevitable, and adapting to it is key to staying at the forefront of technology. As I worked through this transition in Angular 15, I found it not only improved the development experience but also reinforced the idea that growth and improvement are constants in the world of software development. Embrace these changes, and you'll continue to build better, more maintainable applications 😄🚀Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Sanjampreet Singh - Aug 28 Tony Fx20 - Aug 24 Fang Tanbamrung - Sep 6 Mike Vardy - Aug 28 Once suspended, junlow will not be able to comment or publish posts until their suspension is removed. Once unsuspended, junlow will be able to comment and publish posts again. Once unpublished, all posts by junlow will become hidden and only accessible to themselves. If junlow is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to jun. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag junlow: junlow consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging junlow will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.