How to Use the Backendless Real-Time Database in Your Angular App

Great news! Backendless 5 is now released and it’s time to show you some new features we’ve been working on.  In this article, we will talk about how to integrate the Backendless Real-Time Database into your Angular application. Meanwhile, you can check out the previous version of our Angular app in this post. 

In case you haven’t read the post and don’t have that app yet, please review the previous article, because we will use that application as a starting point for this tutorial. Or, if you just want to start working with it right away, you can download the source code from this GitHub commit.


The first thing we would need to do is to update Backendless JS-SDK to the latest version. Run the following command inside of your project’s directory:

npm i backendless@latest -S

At the end of the response, you should see something like this:

MacBook-Pro:backendless-angular MacBook$ npm i backendless@latest -S
+ backendless@5.0.0

Alright, now, once the package is updated, we need to make sure our application is still working as before. Run your app and make sure everything works fine.

What is Real-Time Database?

In most cases, you want your application to display the up-to-date data without any additional requests to the server. There are three events, which, once occurred, get your client’s app synced with the server data:

• create  – this event is delivered to the client app when a new object is created on the server
• update  – this event is delivered to the client app when an existing object is changed on the server
• delete  – this event is delivered to the client app when an existing object is deleted on the server

All our SDKs (JS, Android, and iOS) have been updated with the logic responsible for establishing a connection to our Real-Time servers and provide you with the ability to subscribe to the events shown above.

Check out the Real-Time Database API documentation for more information.

Integrate Real-Time Updates

Let’s modify our persons.service.ts; just replace your existing content with the following sample code:

import { Injectable } from '@angular/core';
import Backendless from 'backendless';
export class Person {
public objectId?: string;
public name: string;
public address: string;
}
const PersonsStore = Backendless.Data.of(Person);
@Injectable({
providedIn: 'root'
})
export class PersonsService {
public persons: Person[] = [];
loadAll(): void {
  PersonsStore.find<Person>().then((persons: Person[]) => {
    this.persons = persons;
    this.addRealTimeListeners();
  });
}
add(newPerson: Person): Promise<Person> {
  return PersonsStore.save<Person>(newPerson);
}
addRealTimeListeners(): void {
  const rtHandlers: Backendless.EventHandler = PersonsStore.rt();
  rtHandlers.addCreateListener<Person>(this.onPersonAdd.bind(this));
  rtHandlers.addUpdateListener<Person>(this.onPersonChange.bind(this));
  rtHandlers.addDeleteListener<Person>(this.onPersonRemove.bind(this));
}
onPersonAdd(newPerson: Person): void {
  this.persons.push(newPerson);
}
onPersonChange(updatedPerson: Person): void {
  this.persons = this.persons.map(person => {
    return updatedPerson.objectId === person.objectId
      ? updatedPerson
      : person;
  });
}
onPersonRemove(oldPerson: Person): void {
  this.persons = this.persons.filter(person => {
    return oldPerson.objectId !== person.objectId;
  });
}
}

Now let’s review some changes this code makes:

• adds a new property objectId to the Person class,
• changes the add method, where we don’t need to pull the created object into the list of persons; instead, an event listener is created to do it for us automatically,
• adds event listeners for the create |update |delete events to keep our client data up to date with the server data.

Now let’s test it. Just open a browser page with our application in one window and Backendless Console in another window:

Add a new Person object in the Data Browser and you will see that a new Person immediately appears in our app. In some cases, it might be even faster than in Backendless Console.

Now you can play with it. Try to add, change and remove Persons in Data Browser or Rest Console or using the Data Service APIs, and you will always have the synced data in your app.

Summary

As you can see, it was really easy to integrate Real-Time Database into our app. All the changes we made today can be found in this GitHub commit. The demo app has been updated, and you can take a look at it by following this link.

In future posts, we will show you how to easily add UserService into the app, how to use Business Logic for our application, and much more.  

Thank you for reading this post, hope you enjoyed it!