Angular #5 with JSON

Ex 10

Angular with MongoDB integration

Ref : https://www.freakyjolly.com/angular-12-how-to-load-json-data-from-assets-folder/

Step 1

Create a new app by 

ng new json-demo

cd json-demo

code .  to open Visual Studio Code Editor

open app.component.ts file

add

import EmployeesJson from '../assets/employee.json';

and modify AppComponent class by

interface EMPLOYEE {

  ids: number;

  name: string;

}

export class AppComponent {

  title = 'Demo for angular-json interaction';

  Employees: EMPLOYEE[] = EmployeesJson;

  constructor(){

    console.log(this.Employees);

  }

Step 2 

Create JSON File: employees.json  in assets Folder

[
    { "ids": 102, "name": "Dr. Nice" },
    { "ids": 103, "name": "Bombasto" },
    { "ids": 104, "name": "Celeritas" },
    { "ids": 105, "name": "Magneta" },
    { "ids": 106, "name": "RubberMan" },
    { "ids": 107, "name": "Dynama" },
    { "ids": 108, "name": "Dr. IQ" },
    { "ids": 109, "name": "Magma" },
    { "ids": 200, "name": "Tornado" }
  ]

Step 3 

In app folder, create a file name as json-typings.d.ts +  add the following contents and save.

declare module "*.json" {

    const value: any;

    export default value;

    }

Step 4 

Modify file: app.component.html  in app folder as below:

<div>
  <table class="table">
    <thead>
        <tr>
          <th>Ids</th>
          <th>Name</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let employee of Employees">
        <th>{{ employee.ids }}</th>
        <td>{{ employee.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

Step 5 

Modify file: app.component.html  in app folder as below:

 <div class="container mt-5">
  <h1>{{title}}</h1>
  <div>
  <table class="table">
    <thead>
        <tr>
          <th>Ids</th>
          <th>Name</th>
        </tr>
    </thead>
    <br>
    <tbody>
      <tr *ngFor="let employee of Employees">
        <th scope="row">{{ employee.ids }}</th>
        <td style="color: #ff00ff">{{ employee.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

Step 6: 

Install bootstrap by this command in New Terminal of VS code Editor

npm install bootstrap --save

After bootstrap installation: Open angular.json file.

update "styles.css" file at app  root with 

body {background-color: coral;}

In terminal type:

ng serve -o  

Check the browser window will appear similar to this:

Happy ☺☺☺☺Angular  App Development!!!