Code Playground.

Today, I'm going to produce a sample operation to show how to use original JSON file in Angular operation. There area colorful way we can use original JSON file in our Angular operation. 

Let' Get Started 

Step 1 produce an Angular operation with Angular CLI 
From terminal produce a new angular app 

ng new read-local-json-angular

Step 2 produce JSON file with ersatz data 
produce any JSON file with any name, I've created a filecountries.json under, lines inside app brochure. 

[
	{"countryName" : "Afghanistan", "countryCode" : "AF"},
	{"countryName" : "Åland Islands", "countryCode" : "AX"},
	{"countryName" : "Albania", "countryCode" : "AL"},
	{"countryName" : "Algeria", "countryCode" : "DZ"},
	{"countryName" : "American Samoa", "countryCode" : "AS"},
	{"countryName" : "AndorrA", "countryCode" : "AD"},
	{"countryName" : "Angola", "countryCode" : "AO"},
	{"countryName" : "Anguilla", "countryCode" : "AI"},
	{"countryName" : "Antarctica", "countryCode" : "AQ"},
	{"countryName" : "Antigua and Barbuda", "countryCode" : "AG"},
	{"countryName" : "Argentina", "countryCode" : "AR"},
	{"countryName" : "Armenia", "countryCode" : "AM"},
	{"countryName" : "Aruba", "countryCode" : "AW"},
	{"countryName" : "Australia", "countryCode" : "AU"},
	{"countryName" : "Austria", "countryCode" : "AT"},
	{"countryName" : "Azerbaijan", "countryCode" : "AZ"},
	{"countryName" : "Bahamas", "countryCode" : "BS"},
	{"countryName" : "Bahrain", "countryCode" : "BH"}
]

In the below, we file there's static list of countries with its name and law. Now in this app, I'll show the data in app element. 

Step 3 Import JSON file in the element 
Updateapp.component.ts file, Have a look on the updateapp.component.ts file. 

import { Component } from '@angular/core';
import countries from './_files/countries.json';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'json-file-read-angular';
  public countryList:{countryName:string, countryCode:string}[] = countries;
}

By dereliction, Angular does not read the JSON file in the operation. So we need to do some redundant stuff for that. So we will produce a file named' json-typings.d.ts' inside the app brochure of the design. Add below law in it. 

declare module "*.json" {
const value: any;
export default value;
}

Step 4 Update Component Template file 
Add below law insideapp.component.html file 

<div style="text-align:center">
    <h2>
        Country list from local json file...
    </h2>
    <ul *ngFor="let item of countryList">
       <li>
          <h3>Country Name :{{item.countryName}}, Code: {{item.countryCode}}</h3>
       </li>
    </ul>
</div>

Now all the demanded change has been done. 

Step 5 Run the app 
Run the app with npm start over terminal. 

Conclusion 
Using original JSON lines in Angular operations is veritably easy, And it's veritably useful when we need to show some stationary data at frontal end. 

Also Read:-How to Develop Basic Firebase CRUD Operations in Angular

Also Read:-How to Implement Firebase Storage Using AngularJS

Thank You!