The 10 best Angular tips selected by the community

Waterplea and I embarked on a fun challenge back in June: we published a fresh Angular tip on Twitter every single day. The response from the Angular community was overwhelmingly positive.

Now I’ve put together this article featuring the 10 most-liked tips, explaining the reasoning behind each one in greater depth.

Let’s dive in!

Tokenize global objects

The tweet that gained the most traction was about using DI tokens to represent global objects.

As frontend developers, we operate in an environment where certain globals—like window, document, the fetch method, or location—are always available. We rarely stop to think about scenarios where they might be missing.

However, consider Angular Universal or a Jest testing setup—there’s no browser, no Window object, and no DOM. By turning these globals into tokens, you can easily inject, override, and test your code in any environment without hitting a wall.

?#AngularTip for today! You can convert global objects into tokens and use them with #angular Dependency Injection. This approach makes your code more abstract, easier to swap out, and simpler to test.

Oh, and we include all the standard tokens in our library: https://t.co/zPMj3orUpT pic.twitter.com/D3S6qCrvyE

— Roman Sedov (@marsibarsi) June 21, 2020

Interested in learning more about tokens and digging deeper into Angular Dependency Injection? Check out my free DI chapter on angular.institute

Extend Observable or Subject

I’ve noticed many developers creating focused services in their apps that handle a single responsibility well. Since we work with RxJS, a service often wraps just one Observable or Subject and applies some data transformation to it.

In such cases, you can simplify things further by having your service extend the Observable or Subject class:

?#AngularTip of the day! Remember that your #angular services are just classes—so they can extend Observable too.

Discover how we leverage this pattern in Web APIs for Angular here: https://t.co/PZyXR5fk5I

And here’s a quick look at our GeolocationService implementation pic.twitter.com/sfLX5kSUF9

— Roman Sedov (@marsibarsi) June 20, 2020

Control value as ReplaySubject

Sometimes you’re in a situation where you want to subscribe to a control’s valueChanges and still get its latest value right away. Instead of building something from scratch, just use this wrapper:

?#AngularTip of the day! With a tiny wrapper, you can convert the valueChanges of an AbstractControl / AbstractControlDirective in #angular into a ReplaySubject(1).

?Grab the gist here: https://t.co/HO3vGvND9D pic.twitter.com/RcOpNo9MTM

— Roman Sedov (@marsibarsi) June 6, 2020

Welcome High DPI users

Are you aware that you can keep tabs on users sporting High DPI screens?

By tapping into native media tags, you can detect this and enhance your app for High DPI displays:

?#AngularTip of the day! Build an #angular structural directive to render content solely for users with High DPI screens.

?Combine it with video or picture elements for best results. pic.twitter.com/ejNeENGoyI

— Roman Sedov (@marsibarsi) June 17, 2020

Do not forget about pipes!

Pipes are a potent feature for embracing the Angular mindset. They let us stick to a declarative style inside component templates. It's disappointing that many Angular developers skip crafting custom pipes, given they can be tailored to nearly any data transformation scenario.

Here's a versatile pipe example that covers many cases:

?#AngularTip of the day! Create a straightforward #angular mapper pipe that applies pure functions to transform values in a template. Check out my well-typed example

⬆️As a result, Angular triggers change detection only when mapper parameters shift

Stackblitz demo:https://t.co/C5ddi9GQu4 pic.twitter.com/i7vhJnYtGz

— Roman Sedov (@marsibarsi) June 10, 2020

Get your box with banana

It goes by several names: banana in a box, two-way binding, input-output. It's handy in scenarios like working with ngModel. But how can you set this up for your custom component?

#AngularTip of the day! Did you know you can enable "Banana in a box" input-output in your Angular component?

Simply append "Change" to the output name: pic.twitter.com/mxkrR455XT

— Roman Sedov (@marsibarsi) July 16, 2020

RxJS is an unexplored world

When working with RxJS operators, I make a point to review every parameter and overload. That's because many hidden capabilities exist, and knowing them lets you build streams with greater speed and efficiency.

Plenty of lesser-known operators can resolve a unique challenge in a single line of code, saving you from constructing an elaborate stream.

A personal discovery of mine was this one:

?#AngularTip of the day! #rxjs is packed with subtle features—make sure you explore every parameter that rxjs operators accept.

Take distinctUntilChanged, for instance: it lets you supply your own "compare" function. pic.twitter.com/5ldGEcHVrX

— Roman Sedov (@marsibarsi) June 27, 2020

Another RxJS tweet worth highlighting offers a small tweak that can help keep your components more flexible.

?#AngularTip and #rxjsTip of the day! In public APIs, keep subjects private and expose an observable to the outside world.

? Instead of .asObservable(), reach for .pipe()—it produces the same outcome but leaves room for easier future adjustments. pic.twitter.com/LqFNf4gjjB

— Roman Sedov (@marsibarsi) June 30, 2020

Then there's the one about an operator that squeezes substantial capability into a compact .pipe block.

?#AngularTip and #rxjsTip of the day! Are you familiar with "defaultIfEmpty"? When the source completes without emitting anything, this operator steps in and emits a fallback value. pic.twitter.com/17aezKM0wo

— Roman Sedov (@marsibarsi) June 29, 2020

You can even make your own ngFor alternative

Angular also provides a dedicated syntax for for … of … type directives, letting you craft a custom ngFor tailored to your needs.

Think of a ngFor that walks through a map's entries, or a simple loop that counts from one integer to another:

?#AngularTip of the day! Build an #angular directive that behaves like ngFor, but instead of an array, it loops a specified number of times

?This spares you time on calendars, pagination, or any repetitive UI that needs a fixed count https://t.co/0qtKJUzGVM pic.twitter.com/GsJ6MDOiKY

— Roman Sedov (@marsibarsi) June 9, 2020

Conclusion

Angular spans a vast landscape, and countless topics remain unexplored. I've got a wealth of ideas for fresh tips and practices to share with the community. If those future tweets interest you, follow me on Twitter—and enjoy your day!