The 10 best Angular tips selected by the community

Waterplea and I took an interesting challenge this June: we wrote an Angular tip every day on Twitter. It was warmly welcomed by the Angular community.

I decided to write an article about 10 tips and tricks that have the most likes and explain their concepts in more detail.

Let’s start!

Tokenize global objects

Link to this section

The most popular tweet was about DI tokens of global objects.

In frontend, we are used to many global objects available in any scope. We use objects like window, document, fetch method, location, etc. We don't expect that there can be situations when we do not have them.

But for example, there is no browser, no Window and no DOM in Angular Universal or Jest testing environment. And having global objects as tokens, you can use, replace and test code without problems.

If you want to know more about tokens and deepen your knowledge about Angular Dependency Injection mechanism, check my free chapter about DI on angular.institute

Extend Observable or Subject

Link to this section

I saw many developers who created good services in their apps that make one thing well. Because we use RxJS, service can contain one Observable or Subject inside and do some data transformation for it.

So, you can simplify such situations extending your services from Observable or Subject:

Control value as ReplaySubject

Link to this section

There can be situations when you need to subscribe to control valueChanges and get its current value as well. So, do not reinvent the wheel, just you the following wrapper:

Welcome High DPI users

Link to this section

Do you know that you can monitor your users with High DPI screens?

You can check it and make your app better for High DPI screens with the native media tags:

Do not forget about pipes!

Link to this section

Pipes is a very powerful option to work in Angular way. It allows us to follow the declarative approach inside component templates. It saddens me that some Angular devs avoid creating their own pipes because you can make pipes almost for any case of data transformation.

And here is an example of a common pipe for many cases:

Get your box with banana

Link to this section

It has so many names: banana in a box, two-way binding, input-output. And it is convenient to use it, for example, working with ngModel. But how to implement it for your own component?

RxJS is an unexplored world

Link to this section

I try to check all parameters and overloads of RxJS operators when I use them. The reason is: there are many hidden options knowing which you can write your streams faster and more powerful.

There are also many operators that are not very popular but can solve your particular problem in one line of code instead of a big stream.

One of such discoveries for me was the following one:

There is also a popular tweet about RxJS. It is a small trick to make your components a bit more scalable :)

Or the other one: an operator that can help write tiny .pipe with quite serious functionality.

You can even make your own ngFor alternative

Link to this section

And the last one: Angular has a special syntax for for … of … like directives. This way you can create your own ngFor for your case.

It can be, for example, a ngFor for iterating a map. Or a simple for for iterating from a number to a number:

Conclusion

Link to this section

Angular is big and there is a lot more to tell. I have many ideas for new tips and tricks to share my best practices with the community. So, if you are interested in such new tweets, follow me on Twitter and have a nice day!