title: Write on JSON file and display the same on component in Angular
body: <p>project with 4 components 1. Login 2. Home(to view minute detail of Employee) 3. View(to show complete Details of Employee) and 4. Edit. Am already able to read Employee Details from .json file and display on the View in Detail component and View Component.</p>
  <p>Now I want to change the details available in JSON file and display the same on View and ViewinDetail components.</p>
  <p>My Employee.json is as follows:</p>
  <pre><code>[
      {
          &quot;id&quot;: 1,
          &quot;firstName&quot;: &quot;Abhi&quot;,
          &quot;lastName&quot;: &quot;A B&quot;,
          &quot;gender&quot;: &quot;male&quot;,
          &quot;age&quot;: 25,
          &quot;email&quot;: &quot;Abhi@gmail.com&quot;,
          &quot;phoneNumber&quot;: 8888888888,
          &quot;department&quot;: &quot;IT&quot;,
          &quot;address&quot;: &quot;Bengaluru&quot;
      },
      {
          &quot;id&quot;: 2,
          &quot;firstName&quot;: &quot;Amogh&quot;,
          &quot;lastName&quot;: &quot;A M&quot;,
          &quot;gender&quot;: &quot;male&quot;,
          &quot;age&quot;: 25,
          &quot;email&quot;: &quot;Amogh@gmail.com&quot;,
          &quot;phoneNumber&quot;: 8888888888,
          &quot;department&quot;: &quot;IT&quot;,
          &quot;address&quot;: &quot;Bengaluru&quot;
      },
      {
          &quot;id&quot;: 3,
          &quot;firstName&quot;: &quot;Harsha&quot;,
          &quot;lastName&quot;: &quot;H A&quot;,
          &quot;gender&quot;: &quot;male&quot;,
          &quot;age&quot;: 25,
          &quot;email&quot;: &quot;Harsha@gmail.com&quot;,
          &quot;phoneNumber&quot;: 8888888888,
          &quot;department&quot;: &quot;IT&quot;,
          &quot;address&quot;: &quot;Bengaluru&quot;
      }
  ]
  </code></pre>
  <p>My home.html is as follows:</p>
  <pre><code>&lt;header&gt;Welcome Home&lt;/header&gt;
  &lt;br /&gt;
  &lt;div class=&quot;container panel panel-default&quot; *ngFor=&quot;let employee of employeeList;&quot;&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;
                  &lt;h3 class=&quot;panel-title&quot;&gt;{{employee.firstName}} {{employee.lastName}}&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class=&quot;panel-body&quot;&gt;
                  &lt;div class=&quot;col-xs-10&quot;&gt;
                          &lt;div class=&quot;row vertical-align&quot;&gt;
                                  &lt;div class=&quot;col-xs-8 offset-md-2&quot;&gt;
                                          &lt;div class=&quot;row&quot;&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          First Name
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          : {{employee.firstName}}
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;row&quot;&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          Last Name
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          : {{employee.lastName}}
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;row&quot;&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          Gender
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          : {{employee.gender}}
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class=&quot;row&quot;&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          Department
                                                  &lt;/div&gt;
                                                  &lt;div class=&quot;col-xs-6&quot;&gt;
                                                          : {{employee.department}}
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div&gt;
                                                  &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;viewEmployee(employee.id)&quot;&gt;
                                                          View&lt;/button&gt;&amp;nbsp;
                                                  &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;editEmployee(employee.id)&quot;&gt;
                                                          Edit
                                                  &lt;/button&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My home.ts is as follows:</p>
  <pre><code>import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  import employees from '../employeeDetails/employees.json';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent {
    constructor(private router: Router) { }
    public employeeList: {
      id: number;
      firstName: string;
      lastName: string;
      gender: string;
      age: number;
      email?: string;
      phoneNumber?: number;
      department: string;
    }[] = employees;
    // tslint:disable-next-line: use-lifecycle-interface
    ngOnInit(): void { }
  
    viewEmployee(id): any {
      this.router.navigateByUrl(`/view/${id}`);
    }
  
    editEmployee(i): any {
      this.router.navigateByUrl('/edit');
    }
  }
  </code></pre>
  <p>My view.html is as follows:</p>
  <pre><code>&lt;header&gt;View Page&lt;/header&gt;
  &lt;br /&gt;
  &lt;div class=&quot;container panel panel-default&quot;&gt;
    &lt;div class=&quot;panel-heading&quot;&gt;
      &lt;h3 class=&quot;panel-title&quot;&gt;{{employee.firstName}} {{employee.lastName}}&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;panel-body&quot;&gt;
      &lt;div class=&quot;col-xs-10&quot;&gt;
        &lt;div class=&quot;row vertical-align&quot;&gt;
          &lt;div class=&quot;col-xs-8 offset-md-2&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                First Name
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.firstName}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                Last Name
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.lastName}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                Gender
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.gender}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                Age
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.age}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                Email
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.email}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                Phone Number
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.phoneNumber}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                Department
              &lt;/div&gt;
              &lt;div class=&quot;col-xs-6&quot;&gt;
                : {{employee.department}}
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button class=&quot;btn btn-primary&quot; (click)=&quot;editEmployee()&quot;&gt;
                Edit
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My view.ts is as follows:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import employees from '../employeeDetails/employees.json';
  
  @Component({
    selector: 'app-view',
    templateUrl: './view.component.html',
    styleUrls: ['./view.component.css']
  })
  export class ViewComponent implements OnInit {
    constructor(private router: Router, private route: ActivatedRoute) { }
    public employeeList: {
      id: number;
      firstName: string;
      lastName: string;
      gender: string;
      age: number;
      email?: string;
      phoneNumber?: number;
      department: string;
    }[] = employees;
    employee;
    ngOnInit(): void {
      this.route.params.subscribe((params) =&gt; {
        const employeeId = params.id;
        this.employee = employees.filter((e) =&gt; e.id === +employeeId)[0];
      });
    }
    editEmployee(): any {
      this.router.navigateByUrl('/edit');
    }
  }
  </code></pre>
  <p>My edit.html is as follws:</p>
  <pre><code>&lt;header&gt;Edit Page&lt;/header&gt;
  &lt;div class=&quot;container&quot; style=&quot;margin-top:1%&quot; action=&quot;/view&quot;&gt;
      &lt;div class=&quot;col-md-6 col-md-offset-3&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;exampleInputEmail&quot;&gt;First Name&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;exampleInputPassword&quot;&gt;LastName&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
  
              &lt;tr&gt;&lt;label for=&quot;exampleInputGender&quot;&gt;Gender : &lt;/label&gt;
                  &amp;nbsp;&amp;nbsp;&lt;td&gt;&lt;input type=&quot;radio&quot; id=&quot;male&quot; name=&quot;gender&quot; value=&quot;male&quot; checked=&quot;checked&quot;&gt;
                      &lt;label for=&quot;male&quot;&gt;Male&lt;/label&gt;&lt;br&gt;&lt;/td&gt; &amp;nbsp;&amp;nbsp;
                  &lt;td&gt;&lt;input type=&quot;radio&quot; id=&quot;female&quot; name=&quot;gender&quot; value=&quot;female&quot;&gt;
                      &lt;label for=&quot;female&quot;&gt;Female&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
  
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;exampleInputAge&quot;&gt;Age&lt;/label&gt;
              &lt;input type=&quot;number&quot; class=&quot;form-control&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;exampleInputEmail&quot;&gt;Email&lt;/label&gt;
              &lt;input type=&quot;email&quot; class=&quot;form-control&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;exampleInputPhoneNumber&quot;&gt;Phone Number&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;exampleInputPhoneNumber&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;exampleInputPhoneNumber&quot;&gt;Address&lt;/label&gt;
              &lt;textarea type=&quot;textbox&quot; class=&quot;form-control&quot; id=&quot;exampleInputAddress&quot;&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; (click)=editDetails()&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My edit.ts is as follows:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  import employees from '../employeeDetails/employees.json';
  
  @Component({
    selector: 'app-edit',
    templateUrl: './edit.component.html',
    styleUrls: ['./edit.component.css']
  })
  export class EditComponent implements OnInit {
  
    constructor(private router: Router, private route: ActivatedRoute) { }
    public employeeList: {
      id: number;
      firstName: string;
      lastName: string;
      gender: string;
      age: number;
      email?: string;
      phoneNumber?: number;
      department: string;
    }[] = employees;
  
    ngOnInit(): void {
    }
    editDetails(): any {
      this.router.navigateByUrl('/edit');
    }
  }
  </code></pre>
  <p>Please help, I don't have much idea how to proceed. I thought of editing the .json file but didn't know how to do it. Any other methods are also acceptable.</p>