Using In-Memory-Web-API in Angular 19

February 07, 2025

Find the steps to use In-Memory-Web-API in Angular 19 application.
1. To use angular-in-memory-web-api in Angular application, first step is to download its library. Run the below command from the root directory of the project.

npm i angular-in-memory-web-api

2. Create a class implementing InMemoryDbService and override createDb() method to enter your data.

export class TestData implements InMemoryDbService {
  createDb() {
    let writerDetails = [
       ------
    ];
    return { writers: writerDetails };
  }
}

To access this data, HTTP URL will be created as /api/writers .
3. Import InMemoryWebApiModule using importProvidersFrom(). Pass a delay time in milliseconds. Delay time will be used to return response.

importProvidersFrom(InMemoryWebApiModule.forRoot(TestData, {delay: 3000}))

Find the example.

1. Create ApplicationConfig

/app/app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { TestData } from './test-data';

export const APP_CONFIG: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    importProvidersFrom(InMemoryWebApiModule.forRoot(TestData, {delay: 3000}))
  ]
};

2. Create In-Memory Data

/app/test-data.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class TestData implements InMemoryDbService {
  createDb() {
    let writerDetails = [
      { id: '100', name: 'Krishn', city: 'Varanasi' },
      { id: '101', name: 'James', city: 'Mumbai' }
    ];
    return { writers: writerDetails };
  }
}

3. Create Service to Perform HTTP Operations

/app/writer.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Writer } from './writer';

@Injectable({
    providedIn: 'root'
})
export class WriterService {
    constructor(private http: HttpClient) { }
    saveWriter(writer: Writer): Observable<Writer[]> {
        console.log(writer);
        return this.http.post<Writer[]>("/api/writers", writer);
    }
    findWriterByCity(city: string): Observable<Writer[]> {
        const httpParams = new HttpParams().set('city', city);
        return this.http.get<any[]>("/api/writers", {
            params: httpParams
        });
    }
}

/app/writer.ts

export interface Writer {
    id:number;
    name:string;
    city:string;
}

4. Access Service using Component

In Angular 19, components are standalone by default.
/app/writer.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { WriterService } from './writer.service';
import { Writer } from './writer';
import { CommonModule } from '@angular/common';

@Component({
   selector: 'app-writer',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './writer.component.html'
})
export class WriterComponent implements OnInit {
   writersByCity$!: Observable<any[]>;

   constructor(private writerService: WriterService) { }

   ngOnInit() {
      this.addWriter();
      this.searchWriterByCity("Varanasi");
   }
   addWriter() {
      const writer: Writer = { id: 102, name: 'Rajesh', city: 'Varanasi' };
      const data = this.writerService.saveWriter(writer);
   }
   searchWriterByCity(city: string) {
      this.writersByCity$ = this.writerService.findWriterByCity(city);
   }
}

/app/writer.component.html

<h3>Writers</h3>
<div *ngFor="let writer of writersByCity$ | async" >
    Id: {{writer.id}}, Name: {{writer.name}}, City: {{writer.city}}
</div>

5.Output

6. Reference

angular-in-memory-web-api