How to use IndexedDB in Angular?

I use Dexie as it's a more mature and lightweight library and with all features.Compatible with VueJs, React, Angular and Vanilla JS

Alternative ngx-indexed-db

use ngx-indexed-db npm library:

npm install ngx-indexed-db

Import the NgxIndexedDBModule and initiate it:

import { NgxIndexedDBModule } from 'ngx-indexed-db';const dbConfig: DBConfig  = {  name: 'MyDb',  version: 1,  objectStoresMeta: [{    store: 'people',    storeConfig: { keyPath: 'id', autoIncrement: true },    storeSchema: [      { name: 'name', keypath: 'name', options: { unique: false } },      { name: 'email', keypath: 'email', options: { unique: false } }    ]  }]};@NgModule({  ...  imports: [    ...    NgxIndexedDBModule.forRoot(dbConfig)  ],  ...})

Migrations:

import { NgxIndexedDBModule, DBConfig } from 'ngx-indexed-db';// Ahead of time compiles requires an exported function for factoriesexport function migrationFactory() {  // The animal table was added with version 2 but none of the existing tables or data needed  // to be modified so a migrator for that version is not included.  return {    1: (db, transaction) => {      const store = transaction.objectStore('people');      store.createIndex('country', 'country', { unique: false });    },    3: (db, transaction) => {      const store = transaction.objectStore('people');      store.createIndex('age', 'age', { unique: false });    }  };}const dbConfig: DBConfig  = {  name: 'MyDb',  version: 3,  objectStoresMeta: [{    store: 'people',    storeConfig: { keyPath: 'id', autoIncrement: true },    storeSchema: [      { name: 'name', keypath: 'name', options: { unique: false } },      { name: 'email', keypath: 'email', options: { unique: false } }    ]  }, {    // animals added in version 2    store: 'animals',    storeConfig: { keyPath: 'id', autoIncrement: true },    storeSchema: [      { name: 'name', keypath: 'name', options: { unique: true } },    ]  }],  // provide the migration factory to the DBConfig  migrationFactory};@NgModule({  ...  imports: [    ...    NgxIndexedDBModule.forRoot(dbConfig)  ],  ...})

NgxIndexedDB serviceFirst, import the service:

import { NgxIndexedDBService } from 'ngx-indexed-db';...  export class AppComponent {    constructor(private dbService: NgxIndexedDBService){    }  }

Easiest way to use IndexedDB. A lightweight, minimalistic wrapper that provides a straightforward API for developers using IndexedDB shared below a link

https://dexie.org