Sign in

Angular Google Developer Expert / marsibarsi.me / angular.institute / jamigo.app

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.

Basic terms

Here are basic terms about ng-content to refresh all the features before reading this article. If you are ace in it, you can just skip this chapter. …


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…


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.

Disclaimer about package weight

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 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. …

Roman Sedov

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