When using RxJS, often people remember the array operators such as map, filter, reduce, etc…

Although I highly recommend using them whenever possible for the right reasons, it can be also said that using another operator that is more specialized can result in the possibility of a smaller code print or improved readability for another developer.

Here, I will try to highlight some that I use when these scenarios arise.

1. Pluck

Maps each source value (an object) to its specified nested property.

Let’s start off with, which can be very similar to, however, it only takes one selected property off every…

Create an effective drag and drop container using only RxJS

Drag and drop has been a necessary feature for many web applications, whether for uploading images or reorganizing information. It is an intuitive way of giving user interaction, without the need for words.

This is what we will be creating today!

I’ll start off by defining RxJS, in case this is the first you’ve heard of it.

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

Basically, it allows the developer to break down multiple async code and compose them…

TypeScript has provided us with many opportunities for JavaScript. One of those is type safety checking at compile time.

In this article, we will briefly go over how we can enhance our code base by using generics instead of ignoring the types by using any.

If you are experienced with server-side languages, such as C#, Java, etc., you would already have an understanding or at least been introduced to how it works.

Take, for example, the function below:

Now, that is a basic function. Our definition is simply to add two variables.

If the variables are numeric, it will…

If you are new to RxJS, you have been missing out!

No worries, though. Now is a great opportunity to start getting involved. In this piece, you will learn how easy it is to create a drag and drop for any element.

I won’t go in-depth about RxJS today. I just wanted to make something quickly, as this feature is regularly requested.

Let’s begin with the element which you would like to be dragged.

Now that we have the element set up, it is time to wire up the JavaScript/TypeScript. …

In this post, we’ll learn what decorators are, why they’re useful, and how to create them. We’ll do this with TypeScript — demonstrating how useful this is in the angular framework.

Decorators???

In truth, decorators are not a part of ES6. However, in keeping with the nature of TypeScript they’re currently an experimental feature, which can be enabled by adding:

If you need more details about the draft, head over to the TC39 proposal for decorators.

OK, and…???

Hold on! I just want to make it clear that decorators are not a part of TypeScript by default and certainly not a part…

This is a pretty quick post about Angular directives and how to use some new browser APIs to achieve them.

These can also can be used outside of Angular. The code isn’t too attached to a framework because the underlying functionality is really just JavaScript.

In this current environment, applications need to load fast and have many assets (images, fonts, translations, etc.). Performance is on everyone’s mind, or at least most people’s.

One technique to achieve this is to use lazy loading.

Lazy loading is a technique that defers the loading of non-critical resources while the page is initially loading…

This is part 1 of 3 where we highlight a common scenario in Angular when we use forms, especially with autosaving.

• Part 1: Highlight the situation and handle it with RxJS.
• Part 2: Enhance with NgRx.
• Part 3: Compartmentalize and simplify with Nx.

Now, this will only highlight a very minimal use case, using ngModel, but it can be applied to very complex forms for both reactive and template-driven forms.

The Situation

Let’s say we have a text area for comments and a button that goes to a different page to view all your comments.

The comments get updated when the…

“With great power comes great responsibility.” –Amazing Fantasy #15

A very important part in RxJS is to ensure that your observables have a shelf life and that they are deterministic. They should not live on forever or else they’re a potential risk for a memory leak.

The example below highlights how having a service that returns data over a period of time seems to work fine on the surface.

Component One has a service that is subscribed to on the template and has navigation to Component Two.

Component Two navigates back to Component One.

No problem, right?

Wrong — Take a Closer Look

When…