Firebase ❤️ NGXS, The Perfect Couple

Firebase ❤️ NGXS, The Perfect Couple

Easily integrate Firebase with NGXS to keep all your data synced in the store

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 core focus, it helped thousands of developers to make the dreaded state management problem go away.

But how can we bring them together to take things to the next level?

NGXS recently introduced a plugin called @ngxs-labs/firestore-plugin which provides a simple yet flexible API to connect an @Action to a Firestore query, and its query results to the store, allowing you to easily keep all your app data in a single place, making things much easier to select and combine data from different origins (Firestore, REST APIs, etc) and displaying it in your components.

In this tutorial we'll go over how the plugin works and a few examples of how to use it.

How does it work?

Let's say you have a @State, and you want to fetch items from a Firestore collection into the state. Using firestore-plugin all you need to do is:

  • Connect an @Action to a Firestore query
  • Listen for query results in the StreamEmmitted Action handler and update the state accordingly.

That's it. That's all you need. Now let's take a closer look how to do this and how it works under the hood.


What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

Firebase Introduction with C#

LIKE | COMMENT | SHARE | SUBSCRIBE Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google...

Create database into firebase

LIKE | COMMENT | SHARE | SUBSCRIBE In this video, I will show you how to Create database into #firebase console. Subscribe & Stay Connected! Thank You! ♥ #Fi...

Save Employee into firebase

LIKE | COMMENT | SHARE | SUBSCRIBE In this video, I will show you how to save employee information into firebase database. Subscribe & Stay Connected! Thank ...

Install firesharp library from nuget

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase C# Library FireSharp contains development information for the Firebase API, written in C#. This library provi...