How to integrate Pouch DB with Angular ?

I have been exploring with developing offline first web applications and stumbled upon Pouch DB recently .

Pouch DB impressed me. It is a very simple but effective way to store data offline (in the browser) and then sync it with database on the cloud (through Couch db).

Pouch DB and Couch DB work hand in hand seamlessly. Good brothers!

Here is the strategy :

Store data while offline on browser (in Pouch DB)

Store data while online on the cloud (in Couch DB)

The sync just takes a single method . I am not diving into those details in this post though. This is about how to integrate Pouch DB with Angular.

Here are the steps:

Step 1:

Install Pouch DB through npm:

  • npm install pouchdb

This will install pouch db in your angular project

Step 2:

Import pouch db in your component and initialize it in your constructor like this:

import PouchDB from 'node_modules/pouchdb';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
pouchdb: any;
  constructor(private formBuilder: FormBuilder) {
    this.pouchdb = new PouchDB("pouchform");
  }
}

The above creates a database named pouchform in the browser . Pouch DB uses IndexedDB on the browser(I am using Chrome).

After these two steps I assumed the database will be initialized. That’s what the tutorials I searched mentioned. But it didn’t work for me . I am using Angular 7 . It threw the below error :

To resolve this you need to add the below entry in polyfills.ts file in your angular project:

(window as any).global = window;

Polyfills.ts is used by angular to include code which makes the application compatible to work across different browsers.

But I don’t really know what exactly the above declaration has to do with pouch db compatibility. I didn’t dive into it further yet.

Thats it!

The database is initialized.

STEP 3:

Now create a form (I created a reactive angular form) , create a json object with the values obtained through the form and push it to Pouch DB :

The template code:

<h1>Welcome to Pouch DB Integration Demo</h1>
<br>
<br>
<form [formGroup]="pouchform"> 
  <label>Your Name</label>
  <input formControlName="name"/>
  <br>
  <br>
  <label>Your email id</label>
  <input type="email" formControlName="emailid"/>
  <br>
  <br>
  <button (click)="saveForm()" type="submit">Save Form</button>
</form>

The component code for save logic:

  saveForm() {
    var pouchform = {
      _id: new Date().toISOString(),
      name: this.pouchform.value.name,
      emailid: this.pouchform.value.emailid
    }
    this.pouchdb.put(pouchform, function (result, error) {
      console.log(result);
      if (!error) {
        alert("Pouch form saved successfully")
      }
    }
    )
  }

Notice the _id field in the JSON object. This is the identifier used by Pouch DB. Using current date -time ensures that the id is unique and servers as a good identifier . Here I have used callback to know the result of the database save operation. Pouch DB also supports promises which are more elegant than callbacks.

Thats it , the recipe is ready.

Now run the application .

The below form gets displayed:

Enter some values and click on Save Form button.

It gets stored in your browser’s IndexedDB:

As simple as that.

The real advantage of this functionality is when you want to sync data to the cloud.

That gives a beautiful offline first experience to the end user.

Also you have to make your angular application a PWA (Progressive Web APP) using service workers for the app to work offline. That is left out in this post.

Use this recipe and please let me know if you found it useful!

Here is the git repository with the sample project :

https://github.com/vijaysrj/pouchdb-angular


Posted

in

,

by

Comments

2 responses to “How to integrate Pouch DB with Angular ?”

Leave a Reply to How to search documents in Pouch DB through Angular, based on specific field? – The Full Stack DeveloperCancel reply

Discover more from The Full Stack Developer

Subscribe now to keep reading and get access to the full archive.

Continue reading