How to get data from JSON file in Angular 16

In Angular 16, you can easily retrieve data from a JSON file and use it in your application. Here’s a simple guide on how to do it.

Step 1: Create a JSON file

First, create a JSON file that contains the data you want to retrieve. For example, you can create a file called data.json with the following content:

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com"
}
    

Step 2: Import HttpClientModule

In your Angular project, make sure you have imported HttpClientModule in your app.module.ts file:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
    

Step 3: Create a service to fetch data

Create a service to fetch the data from the JSON file. For example, you can create a service called data.service.ts with the following content:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('path/to/your/data.json');
  }
}
    

Step 4: Use the service in your component

Now you can use the DataService in your component to retrieve the data. For example, you can create a component called data.component.ts with the following content:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe((res) => {
      this.data = res;
    });
  }
}
    

Step 5: Display the data in your template

Finally, you can display the retrieved data in your template. For example, you can create a data.component.html file with the following content:

User information
Name: {{ data.name }}
Age: {{ data.age }}
Email: {{ data.email }}
    

And that’s it! You have successfully retrieved data from a JSON file in Angular 16.