Angular tips/tricks you can use from tomorrow on

Are function calls in your templates slowing your app down? Discover a clever, reusable pipe-based solution.

#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.