Angular has a powerful Dependency Injection basis. We can transfer any data through our apps, transform it and replace it.

But there are not many guides on how to use DI effectively. That is why many developers just use services and sometimes pass global data from the root into components.

Do you know your dependencies?

Sometimes it is not easy to understand how many dependencies your code has.

For example, look at this pseudo class and count all dependencies that it has.


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…


We use TypeScript because it helps develop our apps safer and faster.

TypeScript by default has many simplifications. They help JavaScript developers to start using it easier but they waste a lot of time in the long term.

We collected a set of rules for more strict TypeScript. You just get used to it once and save much time working with your code in the future.

any

There is a simple rule that returns much profit in the long term.

Do not use “any”. Ever.

There is simply no case where you cannot describe a type instead of using “any”. If…


Hey, Angular devs!

@waterplea and I write articles about Angular for inDepthDev from time to time. We wrote almost all of them based on our experience of developing a big UI component library. We’ve been developing, refactoring and growing it for several years and testing our ideas on a big number of projects in our company.

We are happy to announce that we published our library into open source!

In this article I want to write about concepts and practices that we build our library with and tell you why you should try it for both new and old projects…


Here is my last RxJS Challenge and it is big and really challenging!

Sometimes, we want to make our web apps more native. It can happen, for example, when a large number of our users come from mobile devices or when we create a PWA.

You are offered to imitate native iOS and Android pull-to-refresh behavior on the web with RxJS and Angular.

Try it here: https://stackblitz.com/edit/rxjs-challenge-18

Let’s solve it

The basis of the pull-to-refresh pattern is actually pulling. That is why I want to make it first. Moreover, I want to separate pulling logic from the pull-to-refresh component and describe it in…


Let’s start our last week of RxJS Challenge by switching to hard mode. New challenge contains a picture in some preview app and logic that handles user events and collect them in three streams: drag$, rotation$ and zoom$.

You need to make an RxJS stream that will transform a picture inside zone according to drag events, rotation and zoom (drag works only for scaled image).

Try it here: https://stackblitz.com/edit/rxjs-challenge-16

Let’s explore the task

This challenge is big and there is a lot of code by default. Let’s see what is going on here.

These two entities are tooling for convenient working with drag…


My new challenge is to allow users to select several folders with their mouse dragging (like on a desktop).

You can try your skills here:

https://stackblitz.com/edit/rxjs-challenge-14

My solution

First of all, let’s add references to DOM elements in the template and get them with ViewChild and ViewChildren in our component.

We added areas$$ that emits when area is ready and we can start calculating coordinates of our dragging zone.

So, now we have a stream that emits Rect object with coordinates of the left-top corner of selecting a zone and its width and height. We just listen to mousedown event…


My new challenge offers you a simple system with a portal that can show a modal window with string content. The task is to allow a user to close modal clicking outside it or pressing Escape keyboard key:

https://stackblitz.com/edit/rxjs-challenge-12

Looks easy but…

This task is pretty easy until we realize must only close modal of user both started (mousedown) and ended (mouseup) the click on the overlay. In this case, we do not need to close our modal because it is a common pattern to prevent closing after a miss-click. …


There are a color picker palette and a circle inside it. The task is to make an RxJS stream to allow a user to drag a circle inside the palette and choose another color. And there is also an extra task: show the HEX code of selected color under the palette.

See the whole task and case here:

https://stackblitz.com/edit/rxjs-challenge-10

My solution to the first task

First of all we need to get a DOM element of the palette to send it into the reactive world:

The trick is simple: we get DOM element with ViewChild and handle it with a setter to next it into…


In my new challenge you are offered to make an RxJS operator function that prevents unnecessary backend requests when it is possible to calculate items locally.

Try to solve it here:

https://stackblitz.com/edit/rxjs-challenge-8

My solution

So, there are many good solutions in replies to my tweet with the challenge, take a look:

You can compare them and choose a one you like. In all those solutions people make cache for all requests. And I decided to solve the task a bit differently. I will write an operator that caches results for a narrowed search.

For example, we type tes and get ['test1'…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store