Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

The 10 best Angular tips selected by the community

Post Editor

10 tips and tricks from June every day challenge that have the most likes and explanation of their concepts in more detail.

4 min read
post

The 10 best Angular tips selected by the community

10 tips and tricks from June every day challenge that have the most likes and explanation of their concepts in more detail.

post
post
4 min read
4 min read

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

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

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

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

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!

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

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

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

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

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!

Discuss with community

Share

About the author

author_image
Roman Sedov

Frontend Developer at Tinkoff.ru

author_image

About the author

Roman Sedov

Frontend Developer at Tinkoff.ru

About the author

author_image
Roman Sedov

Frontend Developer at Tinkoff.ru

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.

JavaScriptpost
22 December 20203 min read
throwError is not throw error

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

JavaScriptpost
22 December 20203 min read
throwError is not throw error

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

Read more
JavaScriptpostthrowError is not throw error

22 December 2020

3 min read

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

Read more