The most well-known and widely used library of reactive programming in JavaScript is RxJS. So much so that the number of downloads per week today is around 25 million (2.3x React, 9.7x Angular, 11x Vue). We have been using RxJS 6 for 3 years. RxJS 7, whose first alpha version was released in September 2019, was released six days ago. So what are the changes awaiting us in RxJS 7? What are the differences between RxJS 7 and 6? Should we switch to RxJS 7?

RxJS 7
RxJS 7

TypeScript, size, memory, and speed in RxJS 7

One of the major changes to RxJS 7 is perhaps the least noticeable. When we…

Angular and ng-observe
Angular and ng-observe

Angular embraces RxJS observables. Major features like the router, HTTP client, and reactive forms expose interfaces that either consume or return RxJS observables. Angular schematics and builders can handle observables to perform asynchronous operations. The common package delivers the famousAsyncPipe for extracting values from observables in component templates. There is even a section dedicated to RxJS and observables in the documentation.

Considering everything, Angular has probably the most comprehensive integration with RxJS observables. Yet, it gets a little complicated once you observe the emitted values in your component class. Let’s create a component that refers to route data and params…

ABP Framework Angular UI has some built-in modules, each of which is a separate npm package. Every package has an exported module that can be loaded by the router. When loaded, these modules introduce several pages to the application via child routes.

To allow a degree of customization, we have an extensibility system, and this requires configuration. So, a question arises: How can we configure modules loaded by loadChildren? It may look like a requirement specific to our use case, but I believe the method described here may help other subjects.

Photo by yinka adeoti on Unsplash

The Setup

Here is a mere module that attaches a simple…

The new version, v10, of Angular has been published only hours ago and announced by this blog post. Although it may not appear as impactful as v9 (with Ivy and all), this release displays Angular team’s commitment to keep Angular up-to-date and relevant.

We found this very exciting and the timing was just right, because we are about to release ABP v3.0! So, we jumped into the details of what changed and how to migrate. Here is what we found.

Major Changes

Angular 9 was released with TypeScript 3.7 support. Soon TypeScript 3.8 was released and Angular v9.1 supported it. Not long…

Photo by Lucian Alexe on Unsplash

Lately, we have started working on v3.0 of ABP Framework and our ultimate goal as the frontend team is to introduce solutions that improve developer experience. In this context, one of the things we are working on is migrating the current grid in Angular to the feature-rich ngx-datatable. Nevertheless, when we tried to implement it in the project, we have realized that the amount of code duplicated in each CRUD page was troublesome.

We have a ListService which makes it easier to work with remote pagination and sorting. It is a core feature and we are planning to keep…

Design patterns are proven, practical, and reusable solutions fit for tackling specific problems in software development. They not only help us avoid pitfalls in organizing our applications, but also provide a shared glossary to describe our implementation and understand each other as fellow developers. There are dozens of patterns already discovered and I am pretty sure you are using at least some of them, even if you do not identify them as a design pattern (Hello constructor pattern 👋).

Design patterns are grouped into three categories: Creational, structural, and behavioral. In this article, I would like to focus on one…

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform Thanks for being part of indepth movement!

It takes time to fully grasp concepts such as dumb/smart/stateful/stateless components, unidirectional data flow, content projection, views and DOM manipulation, and dependency injection in Angular. All that and probably some further information is necessary to build a consistent, scalable, and flexible component architecture. Then, just as you dig deeper and put what you learn into use, new questions and requirements arise. Should I really set this style up through an input property? …

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform Thanks for being part of indepth movement!

Data-binding in Angular is awesome. Really. Just decorate a public property — or setter for that matter — on a component class with @Input and after a quick <app-child [prop]="parentProp"></app-child>, voila! The property on the parent component is bound and ready to consume at will. Emitting events are just as simple: Define an EventEmitter decorate it with @Output and emit it during an internal execution. So simple, so beautiful... Implementing two-way binding is a little more complicated…

I have been working on Angular (not AngularJS, not anymore) since it was at developer preview and have learnt a bit about best practices for that framework throughout all those years. It is quite a long list, arguably too long to cover in a single blog post. Thus, for my first article on Medium, I picked a single best practice that I find easiest to take on and most rewarding when applied: Extending Angular components from —kind of — abstract classes. This could also be one of the most underused/rated features of Angular, considering it is an object-oriented framework.

Photo by JOSHUA COLEMAN on Unsplash


Levent Arman Özak

Twitter: @ArmanOzak — Angular GDE, founder of NG Turkey, team member ABP Framework, JavaScript developer & consultant

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