Content projection is one of the basic features in Angular with good official documentation. Almost everyone knows about it but nevertheless many developers avoid ng-content in their daily job choosing more complex ways and making the developer experience worse.
In this article, I would like to show several typical cases of using ng-content when developing reusable components and explain the benefits of this approach.
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…
CDK is the basic package of the component library Taiga UI.
It has nothing to do with the visual part of the library (actual UI) but is rather a set of useful tools to simplify working with Angular and to make it faster.
You’ll find many useful tools inside and I decided to pick my favorite 5 and write about them here. I use these tools in all my projects and already cannot imagine how to develop Angular apps without them because they save me a lot of time every day.
You may ask: “Why do I have to add…
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. …