NGXS has recently released two plugins to facilitate debugging and running code on specific action lifecycle events. Let’s go over these plugins and learn how to use them and most importantly how they will help us in our app. ngxs-labs/action-lifecycle-hooks The Action Lifecycle Hooks facilitates to execute code on action specific lifecycle events such as Completed or…github.com @ngxs-labs/action-lifecycle-hooks plugin comes handy when we need to execute code another…

A few years ago Firebase was a game-changer for web-app development. Designed for high performance and ease-of-use, developer’s productivity was boosted and millions of apps were built since then. Later on, NGXS brought to the Angular ecosystem a new reactive state management library. With simplicity and code ergonomics as its…

Originally published at https://indepth.dev on April 21, 2020.

Originally published at https://www.toptal.com. “Every year the internet breaks,” goes the saying, and developers usually have to go and fix it. With the long-awaited Angular version 9, one might think this would apply, and apps developed on earlier versions would need to go through a major migration process. But that’s…

In this tutorial, we’ll build a REST API to manage users and roles using Firebase and Node.js. In addition, we’ll see how to use the API to authorize (or not) which users can access specific resources. Originally published at the Toptal Engineering Blog. Introduction Almost every app requires some level of…

Integrate Cypress E2E tests in your Angular app and run them with the CLI’s “ng” command — End to end tests are a great way to make sure your app continues to work as you add more and more features, because you simply cannot regress every scenario manually every time you make changes. By default, Angular comes with Protractor which is an E2E runner on top of…

Here’s a quick tutorial of how you can easily subscribe to every Observable with the async pipe, and never again worry about unsubscribing. — Never .subscribe() again, | async instead When dealing with Observables in Angular we need to subscribe to them to unwrap the data stream and do what we need to do with each emitted value. The most common way to this is to: data: Person[] ngOnInit(){ this.service.data$.subscribe(data=>{ this.data = data }) }

A simple tutorial on how to retrieve data from multiple collections simultaneously and perform “inner join” operation on Firebase using rxjs — In this article we’ll cover some very frequent scenarios when working with Angular and Firebase. Pull data from multiple queries at the same time Join data with a key between collections Pulling data from multiple collections at the same time The usual scenario when pulling data from different collections is to have something like this:

If you are working on an Angular app and need to create reusable Form Components, here’s an easy guide for you on how to build them. — Creating reusable custom FormControl Almost every web app contains forms, and we have to deal with building and modifying them all the time. When we use FormControls we usually need to handle validation, styling and sometimes we also need to add some custom behavior to them.