# Angular

All articles and daily spotlights related to Angular

Preserving Router Component State in Angular with Route Reuse Strategy + CDK Portals

The article discusses preserving the state of components, such as iframes, in Angular using Route Reuse Strategy and CDK Portals. CDK Portals enable dynamic rendering of UI elements outside their usual DOM hierarchy, preventing issues like iframe reloads during route changes. A service, ThirdPartyIframePortalService, manages iframe rendering, positioning, and cleanup without modifying third-party code. The iframe is mounted at the app root but visually remains in its original location, maintaining its state across routes. This approach ensures smooth transitions, avoids invasive hacks, and prevents memory leaks, making it ideal for stateful components like video players or maps.

A Practical Implementation of Angular's Route Reuse Strategy

The article discusses implementing Angular's Route Reuse Strategy to retain component states during navigation, addressing issues like losing filter settings or reloading data. A custom RouteReuseStrategy is created by overriding methods such as shouldDetach, store, shouldAttach, and retrieve to efficiently cache and restore routes. It also introduces a "Current Task" button for quick task access and resolves iframe state loss with a global iframe component and service, improving user experience and app performance.