How to update child components after receiving data from an ajax call in parent

Question

my app structure is as below, my question is how to update children components view on receiving initial or future data, imagine I have only one service which has an event OnDataUpdate, all the child components are receiving the same instance of the service since it has declared in App module providers section, on the other hand, I have tried all these ways & did not work:

ApplicationRef.tick()
ChangeDetectionRef.markForCheck()
ChangeDetectionStrategy
Shared service among components with the OnDataRecieved event which is like this

@Injectable()
export class ApiService {

  public OnDataRecieved: EventEmitter<Model>  = new EventEmitter<Model>();

  constructor(private http: HttpClient, private ngZone: NgZone) {
  }

  public getDataAsync(): Observable<Model> {
      return this.http
        .get<Model>('url')
        .pipe(catchError(er => throwError(er)));
    }
}

and in App root component this is like below code

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class AppComponent implements DoCheck {

  model: BehaviorSubject<Model> = new BehaviorSubject<Model>(new Model()); //with default values
  subModel: BehaviorSubject<SubModel>; 


  constructor(private apiService: ApiService,
    private zone: NgZone) {

    this.apiService.getDashboard().subscribe((data) => {
      this.zone.run(() => {
          this.apiService.OnDataReceived.emit(data);
          this.model = new BehaviorSubject<Model>(data);
      });
    });

    this.model.subscribe((mdl) => {
      this.subModel = new BehaviorSubject<SubModel>(mdl.subModel));
    });
  }

  ngDoCheck() {
  }
}

imagine the model is nested and propagated through the child components as data is loaded or changed, the structure can be like this

 __ AppRootComponent
|_____ Component1
|_________SubCompoent1-1
|_________SubCompoent1-2
|_____ Component2
|_________SubCompoent2-1
|____________SubCompoent2-1-1

I receive the data changes in ngDoCheck, no need to trigger the detect changes, but the UI and child components does not get updated!

In the child components @Component decorator, is the changeDetection key set to OnPush? — Yariv Katz, Dec 18 '18 at 10:59

score 2 · Answer 1 · answered Jan 06 '19 at 12:13

Let's start with some general advice:

You usually don't need a service to make data flow from a component to its (grand-)children. Use @Input bindings for that.
When using a service to manage data flows, use plain RxJS, i.e. instances of Observable, Subject, BehaviorSubject, etc. EventEmitter is an Angular specific meant to handle output events from components and directives. Check this answer if you want to see a similar solution using a BehaviorSubject.
You don't need to tell Angular to run code in the default zone. It does this by default.

Concretely, your service can be as simple as the following:

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

  getData(): Observable<Model> {
    return this.http.get<Model>('...');
  }
}

A component may then subscribe to it and store the value in a plain synchronous property. Down the road this property can be passed as @Input() to child components:

@Component({
  selector: 'my-app',
  template: `
    <strong>AppComponent:</strong> {{model | json}}
    <child [model]="model"></child>
  `
})
export class AppComponent implements OnInit {
  model: Model;

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.getData()
      .subscribe(model => this.model = model);
  }
}

You can also update the model property at any point in time and the change will be propagated to the components children and grandchildren. Here's a Stackblitz with a sample implementation.

score 1 · Accepted Answer · answered Jan 06 '19 at 09:14

i realized how to solve that issue, the structure of that components is hierarchical and I passed the model of each component through @Input(), the problem is the initial request is async and the components are rendered before receiving the real parent object and after receiving the parent object from server there is no object reference for the passed Input objects, so they will not get the changes.

so, how can we solve the issue? simple! remove all inputs and use event-driven programming How? create an event for each object or one event for the parent (root) object which all other objects depend on, share event in global service, trigger/emit event once you receive the root object, and subscribe to that event in child components. let me show you a simple snippet at below:

import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { Injectable, EventEmitter } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

import { RootDto } from 'src/app/model/root.dto.model';

@Injectable()
export class CoreApiService {

  public onDataReceived: EventEmitter<RootDto> = new EventEmitter<RootDto>();

  constructor(private http: HttpClient) {
  }

  public getRootObject(objectId: number): Observable<RootDto> {
     // const _params = new HttpParams().set('objectId', objectId);
      return this.http
        .get<RootDto>(`${Constants.ApiUrl}/root/${objectId}`)
        .pipe(catchError((err: HttpErrorResponse) => {
          return throwError(err);
        }));
    }
}

the root componant is like below

import {
  Component,
  OnInit
} from '@angular/core';

import { CoreApiService } from './core/services/core-api.service';
import { RootDto } from 'src/app/model/root.dto.model';

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

  constructor(private apiService: CoreApiService) {

  }

  ngOnInit() {
    this.apiService.getRootObject().subscribe((data: RootDto) => {
   // todo: do something here
          this.apiService.onDataReceived.emit(data);
        },
        (err: HttpErrorResponse) => {
          if (err.status === 401 || err.status === 403) {
            // not authorized
          }else {
          // todo: error happened!
    }
        }
      );
  }
}

the child components are like below

import {
  Component,
  OnInit,
  NgZone
} from '@angular/core';

import { CoreApiService } from '../core/services/core-api.service';
import { RootDto } from 'src/app/model/root.dto.model';
import { ChildDto } from '../model/child.dto.model';

@Component({
  selector: 'app-first-child',
  templateUrl: './firstChild.component.html',
  styleUrls: ['./firstChild.component.css']
})
export class FirstChildComponent implements OnInit {

  dto: ChildDto;
  isLoaded = false;

  constructor(private apiService: CoreApiService, private zone: NgZone) {
    this.apiService.onDataReceived.subscribe((rootDto: RootDto) => {
      this.zone.run(() => {
        this.dto = Utils.ObjectFactory.Create(rootDto.firstChildDto); // to make sure that we will have a new reference (so that change detction will be triggered) i use object instantiation
  // NOTICE:
  // for arrays don't simply assign or push new item to the array, because the reference is not changed the change detection is not triggered
  // if the array size is small before assigning new value, you can simply empty (myArray = [];) the array otherwise don't do that
        this.isLoaded = true;
      });
    });
  }

  ngOnInit() {
  }

  // the rest of logic
}

you can do the same for all other components and even you can create more events in share service and trigger it as you wish

How to update child components after receiving data from an ajax call in parent

2 Answers2

Linked