
Benedikt Starzengruber
Mar 9, 2022
Angular tips/tricks you can use from tomorrow on

#1about 7 minutes
Create custom RxJS operators for cleaner data streams
Abstract repetitive or complex RxJS logic into custom operators like `isTruthy` or `filterArray` to improve code readability and maintainability.
#2about 7 minutes
Avoid performance issues from template function calls
Use a generic, pure wrapper pipe to call component methods from the template without triggering excessive change detection cycles.
#3about 6 minutes
Style native browser scrollbars using CSS pseudo-elements
Customize the appearance of native scrollbars using WebKit and Firefox-specific CSS properties to avoid third-party libraries and maintain performance.
#4about 6 minutes
Implement responsive logic with the ResizeObserver API
Create a reusable Angular directive that uses the ResizeObserver API to emit events when an element's size changes, enabling complex responsive layouts.
#5about 6 minutes
Lazy load content on demand with IntersectionObserver
Use the IntersectionObserver API within a structural directive to defer rendering components or loading data until they scroll into the viewport.
#6about 5 minutes
Reduce bundle size by lazy loading components
Use Webpack's dynamic `import()` syntax and Single Component Angular Modules (SCAMs) to lazy load components and reduce the initial main bundle size.
#7about 2 minutes
Preload lazy-loaded components on hover for better UX
Optimize the user experience of lazy-loaded components by pre-fetching the JavaScript bundle on a `mouseenter` event before the user clicks.
#8about 9 minutes
Recap of tips and audience Q&A
A summary of the six practical tips is provided, followed by a Q&A session covering standalone components, Angular's ecosystem, and IntersectionObserver usage.
Related jobs
Jobs that call for the skills explored in this talk.
yesterday
Fullstack Software Developer (m/w/d) C#/Golang & Angular

VONQ
Rotterdam, Netherlands
Intermediate
7 days ago
Senior Software Developer (Java/Angular) (m/f/d)

IGEL Technology GmbH
Bremen, Germany
Senior
9 days ago
Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior