Benedikt Starzengruber

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.

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.

Angular Developer

Picnic Technologies B.V.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Why HR struggles with technology implementation and adoption
04:22 MIN

Why HR struggles with technology implementation and adoption

What 2025 Taught Us: A Year-End Special with Hung Lee

Actionable tips for employers and employees
09:16 MIN

Actionable tips for employers and employees

Sustainable High Performance: Build It or Pay the Price

Why corporate AI adoption lags behind the hype
03:28 MIN

Why corporate AI adoption lags behind the hype

What 2025 Taught Us: A Year-End Special with Hung Lee

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Angular Unleashed: Mastering Modern Web Development with Angular58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

The Illusion of a Performant Web Application28:56

The Illusion of a Performant Web Application

Cathrin Möller

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Angular Magical directives29:11

Angular Magical directives

Valentine Awe

Angular Features You Should be Using36:22

Angular Features You Should be Using

Sani Yusuf

Angular Signals: what's all the fuss about?58:03

Angular Signals: what's all the fuss about?

Daniela Bonvini

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos

From learning to earning

Jobs that call for the skills explored in this talk.