Angular 2: Http get call with Subject not working as expected

Question

In my angular application, I have a form Form Page in which employee data can be entered and I have a grid page Grid Page where the entered data will be displayed. When I submit the form, the details should get added in the grid page.

Initially, I'll fetch the employees' data in grid from json file.

The issue I face here is, even after submitting the form, the new data is not getting added to the grid. Grid is always loading from json file. The pushed data from the form should get added to the grid which is not happening.

In my service, I have the following code:

import { Employee } from '../employee.model';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
//import 'rxjs/add/operator/map';

@Injectable()
export class BasicServices {

  public newaddFormDetails = new Subject<Employee[]>();
  private _url: string = "/assets/data/employeesData.json";
  public employees: Employee[];

  // private employees: Employee [] =[ {"title":"John", "body":"TL"},
  // {"title":"Kennedy", "body":"SSE"}];
  // getEmployees() {
  //   return this.employees;
  // }

  getEmployees() {
    return this.httpClient.get<Employee[]>(this._url)
    .subscribe(
      (employees:Employee[]) => {
        this.employees = employees;
        this.newaddFormDetails.next(this.employees);
      });
  }

addToGrid(emp: Employee) {
this.employees.push(emp);
this.newaddFormDetails.next(this.employees);
}   

  constructor(private httpClient: HttpClient) {
  }

}

The grid component file is below:

import { Component, OnInit, OnDestroy} from '@angular/core';
import { BasicServices } from '../services/basic.services';
import { Subscription } from 'rxjs/Subscription';
import { Employee } from '../employee.model';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.less']
})

export class GridComponent implements OnInit, OnDestroy{

  subscription: Subscription;
  employees: Employee[];

  constructor( private _basicService: BasicServices) {
  }
  ngOnInit() {
    this.subscription = this._basicService.newaddFormDetails.subscribe(  
      (employees: Employee[]) => {
        this.employees = employees;
       } 
    );
    this._basicService.getEmployees();

  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

In my grid component html file, I simply have a table with the code below:

<table class='table table-striped table-condensed' *ngIf='employees && employees.length'>
<thead>
    <tr>        
        <th style="min-width: 40px;">Title</th>
        <th style="min-width: 40px;">Body</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let emp of employees">
    <td>{{emp.title| uppercase}}</td>
    <td>{{emp.body}}</td>
    <td>
    </tr>
</tbody>
</table>

Form component file:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { BasicServices } from '../services/basic.services';
import { Router } from '@angular/router';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.less']
})
export class FormComponent implements OnInit {
  private form;
    constructor(private _basicService: BasicServices,
      private formBuilder: FormBuilder,
      private router: Router
      ) { }


  ngOnInit() {
   this._basicService.getEmployees();
   this.form = this.formBuilder.group({
      title: [null, Validators.required],
      body: [null, Validators.required],
    });

  }

  onSubmit(formValue):void {
    this._basicService.addToGrid(formValue);
    this.form.reset();
    this.router.navigate(['/grid']);
  }
}

Form component template

<div class="container">
    <h1> Add Records </h1>
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
         <div class="form-group">
            <label> Title : </label> 
                <input type="text" class="form-control" required formControlName="title" placeholder="FirstName" [(ngModel)] ="title"> 
            </div>
            <div class="form-group">
                <label> Body : </label> 
                <input type="text" class="form-control" required formControlName="body" placeholder="LastName">
            </div>
            <input type="submit" class="btn btn-info" name="Submit" [disabled]="!form.valid">


    </form>

</div>

My code is here in Stackblitz

Answer 1

For this basic case, it may be much easier to do without the Subject.

Service

private _url: string = "/assets/data/employeesData.json";
public employees: Employee[];

constructor(private httpClient: HttpClient) {
   this.getEmployees();
}

addToGrid(emp: Employee) { 
   this.employees.push(emp); 
}

getEmployees() {
  return this.httpClient.get<Employee[]>(this._url)
    .subscribe(
      (employees:Employee[]) => this.employees = employees);

}

• Remove the Subject and each place it is used.
• When adding the employee, simply add it to the array.

Component

export class GridComponent implements OnInit{

  get employees(): Employee[]{
     return this._basicService.employees;
  }

  constructor( private _basicService: BasicServices) {
  }

  ngOnInit() {

  }

}

• Use a getter to ensure that the component always gets the most recent version of the array. Angular's built-in change detection will cause the template to rebind, which calls this getter, any time the array changes.

NOTE: Not syntax checked.

Also, if you do want to keep with using a Subject, you may need a BehaviorSubject. If you are routing between the form component and the grid component, using a Subject only sends the value to any current subscribers. So if you subscribe after routing, the value will not be emitted. Using a BehaviorSubject retains the last emitted value and will then provide that value upon subscription.

I just did a stackblitz of this here: https://stackblitz.com/edit/angular-no-subject-deborahk

I also added to my stackblitz the same example but with a working BehaviorSubject in place of the Subject.

It's not pretty, but it displays two links to route to the version with the simple getter ("no subject") and the one with the BehaviorSubject ("with subject"). Notice that if you change the BehaviorSubject back to Subject it will stop working because it won't receive the notifications.

UPDATE

Based on new information, here are a few notes/suggestions:

1) You can't update a JSON file. So if you are reading data from a JSON file (which it looks like you are), you can't update data back into that file. See this to confirm: Is it possible to write data to a locally json file with nothing but angular?

2) When you navigate to a component, it is reinitialized and its ngOnInit method is executed.

3) In each of your pages, in your ngOnInit you are calling this._basicService.getEmployees();. As far as I can see, this method is re-reading your JSON file, so loading the original data and overwriting any changes you made and handled with your observables.

4) If you look at the stackblitz I provided, you'll notice that in this working example, the service holds the array of data so that the components don't need to keep re-getting it and losing the updates.

Hope this helps.