Every day, we posted on advice, trick, or just some useful piece from our experience with Angular. This movement was warmly received and supported by the developer community.
I decided to write an article on the ten most liked tricks and explain the concepts shown in them in more detail.
Let's start!
Tokenize global objects!
The most popular tweet talks about DI tokens of global objects.
In the frontend, we are used to the fact that there are many objects in the global environment. We use objects like window, document, fetch method, location and we never expect them to exist.
But, for example, in Angular Universal or the test environment in Jest, there is no browser, no window object, and no DOM. And by passing these entities through the application through tokens, you will never have problems using them, replacing them, or testing your code.
Inheriting from Observable or Subject
I know many developers who create good services in their applications. These services do one thing well. And, since we use RxJS in the Angular ecosystem, such services can only contain one field with an Observable or Subject inside them to transform data.
Such situations can be simplified by inheriting services from Observable or Subject:
Control value as ReplaySubject
There may be situations when it is necessary to subscribe to the valueChanges of the reactive control, starting the stream from its current value. Now you don't have to reinvent the wheel, but simply add the following wrapper to yourself:
Making the app better for High DPI displays
Did you know that you can easily track users with High DPI screens?
Moreover, you can even provide media elements of suitable resolution for such monitors using the native media tag and without additional effort:
Don't forget about the pipes
Pipes are a great tool for working in the style of the Angular framework. They allow us to stay declarative within our component templates. It's sad that some Angular developers avoid creating their own pipes: with them, you can neatly transform data in almost any situation.
And here is an example of a universal pipe for data conversion:
Make your banana box
This Angular feature has many names: banana-in-a-box, two-way binding, or just input-output. This approach is usually found in forms when working with [(ngModel)]. But do you know how to implement this for your own components?
RxJS - the unknown world
I always try to check all parameters and overloads for the RxJS operators I use. Reason: many of them have hidden options, learning which you can write some streams faster and easier.
In addition, there are also unpopular operators. They rarely come across, but they can solve some specific problems in one line of code instead of a huge and tricky stream.
For example, one of these discoveries for me was the comparison function in the distinctUntilChanged operator:
And there was also such a popular tweet about RxJS. A little trick to make your components a bit easier to expand:
Or the defaultIfEmpty operator, which allows you to put useful logic into the stream within one line of code:
You can even write your own alternative to ngFor
And one last thing: Angular has a special syntax for directive selectors like for ... of ... You can use it to create your own ngFor for any of your tasks.
For example, you can do a quick ngFor to iterate over the Map object. Or a simple for for iterating over an index from one number to another:
Conclusion
Angular is big and it has a lot more features. I have a number of ideas for new tricks and tricks from our best practices that I plan to share with the community. If you're interested in new tweets like this, follow me on Twitter . And have a nice day!