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.
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.
I decided to write an article about 10 tips and tricks that have the most likes and explain their concepts in more detail.
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
location, etc. We don't expect that there can be situations when we do not have them.
We use TypeScript because it helps develop our apps safer and faster.
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.
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 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:
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
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:
First of all, let’s add references to DOM elements in the template and get them with
ViewChildren in our component.
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
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:
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:
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:
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