> Markdown version of [/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on?t=2513](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on?t=2513). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Angular tips/tricks you can use from tomorrow on

Mask network latency by triggering dynamic component imports on hover. Discover practical RxJS and change detection strategies to instantly optimize your legacy Angular codebase without a complete rewrite.

- **Speakers:** Benedikt Starzengruber
- **Event:** WeAreDevelopers LIVE
- **Published:** March 9, 2022
- **Duration:** 50:28
- **URL:** https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on

## Summary

Bridging the gap between cutting-edge conference theories and legacy Angular codebases often requires practical, low-friction workflows. Implementing small but impactful strategies allows developers to polish user interfaces and heavily optimize structural performance without completely rewriting existing monolithic logic. For instance, extracting boilerplate stream logic into custom RxJS higher-order operators directly improves code readability and maintainability during complex data transformations.

Rather than enduring the overhead of building multiple individual pure pipes to mitigate aggressive UI algorithmic evaluations triggered by events like `mouseover`, a scalable generic wrapper pipe can securely execute component methods within optimized change detection cycles. To improve frontend rendering performance further, relying on native CSS pseudo-elements like `::-webkit-scrollbar` eliminates the need for bulky third-party libraries that hijack and degrade native browser scrolling mechanics.

Modernizing document flow heavily relies on binding powerful web APIs to reusable Angular structural directives. Constructing a `ResizeObserver` directive dynamically tracking elements inside the `NgZone` empowers precise conditional layouts, whereas an `IntersectionObserver` directive delays expensive DOM instantiation via `ViewContainerRef` until objects actually enter the viewport. Finally, architecting non-critical elements as Single Component Angular Modules (SCAMs) forces Webpack dynamic imports to drastically reduce main JavaScript bundle sizes. Developers can intelligently execute these file loads on a `mouseenter` hover event, seamlessly masking the 150–300 millisecond network latency to ensure code-split dialogs render instantly upon click.

**Keywords:** angular change detection performance, custom rxjs data operators, generic pure wrapper pipes, native css scrollbar customization, angular resize observer directive, intersection observer element rendering, single component angular modules, webpack dynamic component imports, lazy loading modal latency, angular viewcontainerref instantiation, dom hovering network prefetching, angular structural directive design, isolate component bundle size, rxjs stream pattern extraction

## Chapters

1. **Abstracting recurring logic into custom RxJS operators** (01:32) — Repetitive mapping and filtering operations on arrays are extracted into highly readable custom RxJS operators.
1. **Invoking component methods efficiently with pure pipes** (08:32) — Performance bottlenecks caused by triggering functions during change detection are avoided using a generic wrapper pipe.
1. **Styling native browser scrollbars without external libraries** (15:47) — Replacing heavy third-party scrolling scripts with native CSS pseudo-elements creates lightweight and customizable scrollbars.
1. **Implementing responsive behavior with the resize observer API** (21:36) — Complex responsive layout changes that cannot be achieved with CSS are managed through a custom Angular directive leveraging the resize observer.
1. **Lazy loading components with the intersection observer API** (27:55) — Premature API calls and component rendering are prevented by initiating loading only when elements trigger the intersection observer upon entering the viewport.
1. **Reducing initial bundle sizes with component lazy loading** (34:16) — Detaching heavy components from the main application bundle via dynamic module imports ensures faster initial load times.
1. **Exploring Angular component patterns and upcoming framework updates** (41:53) — Optimal component modularity, upcoming standalone capabilities, and framework ecosystem advantages are evaluated alongside community questions.

## Related Moments

- [The rise of modern component-based frameworks and modular architecture](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [Introduction to building reusable Angular components](https://www.wearedevelopers.com/videos/497-angular-magical-directives) (from "Angular Magical directives")
- [Implementing standalone APIs in modern Angular architectures](https://www.wearedevelopers.com/videos/656-stand-alone-components-in-angular) (from "Stand alone components in Angular")
- [Evaluating Angular trade-offs and the web components alternative](https://www.wearedevelopers.com/videos/63-on-tour-with-heroes-moving-from-angular-to-webcomponents) (from "On tour with heroes == Moving from Angular to WebComponents")
- [Summarizing modern patterns for robust interactive components](https://www.wearedevelopers.com/videos/1589-building-interactive-async-ui-with-react-19-and-ariakit) (from "Building Interactive Async UI with React 19 and Ariakit")
- [Replacing Angular modules with lightweight fine-grained libraries](https://www.wearedevelopers.com/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design) (from "Sustainable Angular Architectures with Nx and Strategic Design")

## Related Articles

- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)

## Related Jobs

- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**