# Angular

All articles and daily spotlights related to Angular

RxJS in Action: Creating a Robust Console Log Upload Service with Priority Handling

The article details building a robust log upload service with RxJS, emphasizing priority-based queuing. It captures console logs (log, error, warn), batches them for efficient uploads, and prioritizes errors over warnings. Key features include single active uploads, immediate error handling, delayed warning uploads, and queue management to prevent data loss during network issues. The implementation intercepts console methods, uses local storage for log management, and leverages RxJS operators like switchMap and debounceTime. Advanced logic ensures error priority, buffered warnings, and smooth state transitions, offering developers an efficient and reliable logging solution.

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.