AngularJS 2 is an outdated version of Angular, and the latest version of Angular is Angular 12 (at the time of my knowledge cutoff in September 2021). IndexedDB is a client-side storage mechanism that allows web applications to store data in a structured manner on the user's browser. To implement IndexedDB in an Angular application (Angular 2+), you can follow these steps:

Step 1: Set Up a New Angular Project Assuming you have Node.js and Angular CLI installed, create a new Angular project using the Angular CLI:

ng new my-indexeddb-app cd my-indexeddb-app

Step 2: Install Required Packages To work with IndexedDB, you'll need to install the idb package, which provides a promise-based interface for interacting with IndexedDB:

npm install idb --save

Step 3: Create a Service for IndexedDB In Angular, you can create a service to encapsulate the IndexedDB functionality. Generate a new service using Angular CLI:

ng generate service indexeddb

Then, open the generated service file (indexeddb.service.ts) and implement the IndexedDB methods:

import { Injectable } from '@angular/core'; import { openDB, DBSchema, IDBPDatabase } from 'idb'; @Injectable({ providedIn: 'root' }) export class IndexeddbService { private dbPromise: Promise<IDBPDatabase<MyDBSchema>>; constructor() { this.initDB(); } private async initDB() { this.dbPromise = openDB<MyDBSchema>('my-database', 1, { upgrade(db) { if (!db.objectStoreNames.contains('my-object-store')) { db.createObjectStore('my-object-store', { keyPath: 'id', autoIncrement: true }); } } }); } async addItem(item: any): Promise<void> { const db = await this.dbPromise; const tx = db.transaction('my-object-store', 'readwrite'); const store = tx.objectStore('my-object-store'); await store.add(item); await tx.done; } async getAllItems(): Promise<any[]> { const db = await this.dbPromise; const tx = db.transaction('my-object-store', 'readonly'); const store = tx.objectStore('my-object-store'); return store.getAll(); } } interface MyDBSchema extends DBSchema { 'my-object-store': { key: number; value: any; }; }

Step 4: Use the IndexedDB Service in a Component Now, you can use the IndexedDB service in your Angular components. For example, create a simple form to add data and display the stored data:

import { Component } from '@angular/core'; import { IndexeddbService } from './indexeddb.service'; @Component({ selector: 'app-root', template: ` <form (ngSubmit)="addItem()"> <input [(ngModel)]="newItem" name="newItem" placeholder="Enter item"> <button type="submit">Add Item</button> </form> <ul> <li *ngFor="let item of items">{{ item }}</li> </ul> ` }) export class AppComponent { newItem: string; items: any[] = []; constructor(private indexeddbService: IndexeddbService) { this.getStoredItems(); } async addItem() { if (this.newItem) { await this.indexeddbService.addItem(this.newItem); this.newItem = ''; this.getStoredItems(); } } async getStoredItems() { this.items = await this.indexeddbService.getAllItems(); } }

Step 5: Add the Component to AppModule Finally, don't forget to add the AppComponent to your AppModule.

Note: The above implementation demonstrates basic usage of IndexedDB with Angular. You can expand on this by adding error handling, updating, or deleting items, and incorporating more complex data structures.

Remember that AngularJS 2 is now outdated, and it's recommended to use the latest version of Angular (Angular 12 or later) for new projects.

Have questions or queries?
Get in Touch