In this article, I’ll show how you can use a new library named akita-ng-fire in conjunction with the @angular/fire library to sync your Firebase collections with Akita Stores seamlessly.

This article assumes that you have some working knowledge of Akita and Firebase. If not, please start with the Akita basics / AngularFire basics.

Setup

Let’s create an Angular application and install the required dependancies :

ng new simple-app

ng add @angular/fire

ng add @datorama/akita

npm install akita-ng-fire

Connect Akita and Firebase

First, make sure you have angular/fire setup in your project.

Next, scaffold a new Akita Todos feature:

ng g feature todos/todos

Now, modify TodosStore to the following :

TodoState should extend CollectionState

Here we changed the default EntityState interface with a CollectionState to be sure we’re working with string ids.

And in TodosService add the following code :

First, we add the CollectionConfig decorator and specify the firestore path of our collection. Next, we extend the CollectionService class and provide it with a reference to firestore database and our store.

With this setup, we’ll get all the methods needed to interact with our collection in our component :

Here are the steps :

Sync your store and the collection with : this.service.syncCollection() . It’ll subscribe on your firebase collection’s changes, and update the store accordingly.

your store and the collection with : . It’ll subscribe on your firebase collection’s changes, and update the store accordingly. Get the todos from your local state with: this.query.selectAll()

the todos from your local state with: Add a new todo to Firebase with : this.service.add(...)

That’s it 😎! Your application is now in sync with Firebase.

But that’s not all ! The service provides you with methods to perform CRUD operations on a firebase collection, such as, add, update, and remove, while it keeps your store in sync with it. Moreover, it can be used to sync one document from the collection to the store. For more information, check out the docs.

What’s next ?

In the next articles we will see :

Subscription/Unsubscription strategy (soon ⏳).

Active Document and Subcollections (later ⏰).

State Array management with subcollections (one day 🍁).

…

Many thanks to Netanel Basal for his support and advices for akita-ng-fire and this article. Please checkout his articles :