How to mock data in angular applications
Subscribe to our newsletter
Get insights to help move your business forward.
Last updated date: September 2026
It’s common to use APIs when working with external data sources on some features in Angular. However, you may occasionally work on a feature in parallel without immediate access to the database or API. Or, you might just be experimenting with ideas on a prototype. In such situations, you can fake a data source or mock the data to fulfill your immediate need and focus on your Angular project instead.
Let’s take an example feature — You wish to display the names and additional information of your app’s users in their profile. However, you lack a database or an API.
There are several ways to mock the same results. We will discuss three such approaches in this blog:
- Using json-server
- Using Postman
- Mocking data with a simple JSON file
Your JSON Data
Here is an example of data that you might want to respond to from the app API:
{
"users": [
{
"id": 1234,
"name": "Andrew Owen",
"age": 26,
"eyeColor": "blue"
},
{
"id": 1235,
"name": "Susan Que",
"age": 45,
"eyeColor": "hazel"
},
{
"id": 1236,
"name": "John Doe",
"age": 53,
"eyeColor": "brown"
}
],
"admins": [
{
"id": 1232,
"name": "John Owen",
"age": 53,
"eyeColor": "brown"
}
]
}Mocking with json-server
- Install json-server through pnpm(recommended version is pnpm 12, which is written in Rust and is generally considered a safer and more efficient alternative).
- You can install it system-wide using your OS terminal:
- Mac / Linux:
curl -fsSL https://get.pnpm.io/install.sh | sh -- Windows (PowerShell):
Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression- We can run this separately without affecting the existing codebase.
pnpm add -D json-server --ignore-scripts- If we want to use it in the project as well, open the package.json file in the root of your Angular project and add the “packageManager”.
{
"name": "my-angular-app",
"version": "0.0.0",
"packageManager": "pnpm@12.3.4",
"scripts": { ... }
}- Then, create a new folder for the mock data. It can be a separate project folder or within your Angular application, depending on the previous step. Add the db.json file inside that new folder.
- Update your data in the db.json file. You can copy the above example to try it out.
- Then, you can add the following command to a package.json or run it directly.
json-server -- watch folder/db.json- Visit http://localhost:3000 to verify if json-server is working. Under the Resources section, you should see all available APIs. Click on users to cross-check the data. You can later add more endpoints in the db.json as needed.
- Currently, you can add multiple resources in the same file for simple use cases. It’s also possible to structure data into multiple files and folders, but making them work will require a few extra steps.
It’s easy to get started with json-server, and a basic requirement is a simple JSON file with data. There are also JavaScript libraries like MirageJS or axios-mock-adapter for similar purposes.
Using Postman
Postman, which used to be a simple browser extension, is now a full-fledged API development toolkit. You can download it separately and install it on your system. To run the mock servers in Postman, we need an account and a workspace. The workspace allows you to easily share the mock server and other APIs with team members.
The mock feature allows you to specify the response data and then access that data from anywhere. You can also make your mock API private, protect it with a token, and set up additional headers in both requests and responses.
The first step is to create a mock server from the Postman interface.
Then, we can add request URLs along with the HTTP methods, response code, and response body for each endpoint. Let’s add /users with the following JSON as a response body.
{
"users": [
{
"id": 1234,
"name": "Andrew Owen",
"age": 26,
"eyeColor": "blue"
},
{
"id": 1235,
"name": "Susan Que",
"age": 45,
"eyeColor": "hazel"
},
{
"id": 1236,
"name": "John Doe",
"age": 53,
"eyeColor": "brown"
}
],
}
Then, click next and configure a few more options.
After creating a mock server, you will receive a URL to access them. You can also simulate the network delay and keep track of requests and responses over the period.
Consuming the mock API in Angular apps
- Using the new @Service() Decorator in Angular 22.
Angular 22 introduces the new @Service() decorator, providing a more concise way to define services that are available through the root injector. It eliminates the need for the traditional @Injectable({ providedIn: 'root' }) boilerplate.
- For reactive GET requests, Angular 22's `httpResource()` provides a convenient Signals-based approach. It automatically reacts to Signal changes and exposes the request's value, loading state, and errors. This makes it a good fit for scenarios such as search, filtering, and pagination.
- Generate a new service module with the following command. It will also generate a UserService and its spec file.
ng g service User- Add the following code in the user.service.ts.The URL i.e., http://localhost:3000 is here for simplicity. The usual practice is adding these config values in the environment and importing them here.
// src/app/home/user.service.ts
import { Service, Signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
export interface User {
id: number;
name: string;
age: number;
eyeColor: string;
}
@Service()
export class UserService {
private readonly url = 'http://localhost:3000';
getUsers(querySignal: Signal<string>) {
return httpResource<User[]>(() => {
// Reading the signal creates a reactive dependency.
// When the signal value changes, the request is re-evaluated.
const query = querySignal().trim();
return {
url: `${this.url}/users`,
params: query ? { q: query } : {}
};
});
}
}
- Then, in any component, you can inject the service and call the getUsers() method, passing a reactive search signal to retrieve the users.
// src/app/home/home.component.ts
import {
ChangeDetectionStrategy,
Component,
inject,
signal
} from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { debounceTime } from 'rxjs';
import { UserService } from './user.service';
@Component({
selector: 'app-home',
standalone: true,
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeComponent {
private readonly userService = inject(UserService);
// Raw user input
readonly search = signal('');
// Debounce the search input using RxJS and expose it as a signal
readonly debouncedSearch = toSignal(
toObservable(this.search).pipe(debounceTime(300)),
{ initialValue: '' }
);
// Pass the reactive search signal to the service
readonly usersResource = this.userService.getUsers(this.debouncedSearch);
onSearch(event: Event) {
const input = event.target as HTMLInputElement;
this.search.set(input.value);
}
}- Now, you can iterate over usersResource.value() in the template and use usersResource.isLoading() and usersResource.error() to handle loading and error states.
Mocking data with JSON file
Instead of using other tools, it’s also possible to create a response object in the service itself and then pass these observable values to the component.
// src/app/home/user.service.ts
import {
Service,
Signal,
computed,
} from '@angular/core';
export interface User {
id: number;
name: string;
age: number;
eyeColor: string;
}
interface UsersData {
users: User[];
}
@Service()
export class UserService {
private readonly data: UsersData = {
users: [
{
id: 1234,
name: 'Andrew Owen',
age: 26,
eyeColor: 'blue',
},
{
id: 1235,
name: 'Susan Que',
age: 45,
eyeColor: 'hazel',
},
{
id: 1236,
name: 'John Doe',
age: 53,
eyeColor: 'brown',
},
],
};
getUsers(search: Signal<string>) {
return computed(() => {
const query = search().trim().toLowerCase();
if (!query) {
return this.data.users;
}
return this.data.users.filter(user =>
user.name.toLowerCase().includes(query),
);
});
}
}Moreover, we can move the user data into a separate file, i.e., user.json, and import it into the service file. Because the JSON is loaded through httpResource(), resolveJsonModule is not required.
// users.json
{
"users": [
{
"id": 1234,
"name": "Andrew Owen",
"age": 26,
"eyeColor": "blue"
},
{
"id": 1235,
"name": "Susan Que",
"age": 45,
"eyeColor": "hazel"
},
{
"id": 1236,
"name": "John Doe",
"age": 53,
"eyeColor": "brown"
}
]
}
// src/app/home/user.service.ts
import { Service, Signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
export interface User {
id: number;
name: string;
age: number;
eyeColor: string;
}
interface UsersResponse {
users: User[];
}
@Service()
export class UserService {
private readonly localJsonUrl = '/data/users.json';
getUsers(search: Signal<string>) {
return httpResource<User[], UsersResponse>(() => {
const query = search().trim().toLowerCase();
return {
url: this.localJsonUrl,
// Value available while the HTTP request is loading.
defaultValue: [],
// Convert UsersResponse to User[] and filter by name.
parse: (response: UsersResponse) => {
if (!query) {
return response.users;
}
return response.users.filter(user =>
user.name.toLowerCase().includes(query),
);
},
};
});
}
}Build better products with the right engineering foundation
Mocking data is a practical way to keep Angular development moving when APIs or backend services aren't ready. Whether you use json-server, Postman, or local JSON files, the right approach depends on your development workflow, testing needs, and the complexity of the application.
But building a production-ready application takes more than getting the frontend working. As products grow, engineering teams need to think about API architecture, scalability, performance, maintainability, and how each part of the technology stack supports the product's long-term goals.
At Modus Create, our product engineering teams bring together software engineering, architecture, UX, and product expertise to help organizations build, scale, and modernize digital products. From frontend development with modern frameworks like Angular to API-first architectures and cloud-native platforms, we help teams turn technical decisions into products that are built to evolve.
Need help building or modernizing a digital product? Explore our Product Engineering services →
LET'S GET STARTED
Talk to Modus Create
Big challenges need bold partners. Let’s talk about where you want to go — and start building the path to get there.
Related Posts
Discover more insights from our blog.
