wait till the request completes in angular

Question

In my angular application, I have one parent component i.e. Dashboard Component having 2 Sub Components i.e. Analytics Component & Stats Component. My dashboard.component.html looks like this

<div class="row">
  <div class="col-lg-6"><app-analytics></app-analytics></div>
  <div class="col-lg-6"><app-stats></app-stats></div>
</div>

I am also using a Global Component which is available to all the components works like a global storage. Now in the dashboard.component.ts. I am making a HTTP call to the server, getting the data and saving it into the Global component.

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

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

 constructor(private http : Http){
 };

 ngOnInit(){
  this.http.get('/api/getUserPreferences').subscribe(response=>{
   var data = response.json();
   Global.userPreferences = data.preferences;
  })
}

User preferences I am using in the sub components i.e. Analytics Component and Stats Component.

analytics.component.ts

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

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

 public analyticsUserPreferences : any;

 constructor(private http : Http){
 };

 ngOnInit(){
   this.analyticsUserPreferences  = Global.userPreferences.analytics;
   // Printing just for the question purpose
   console.log(this.analyticsUserPreferences);
 }
}

stats.component.ts

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

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

 public statsUserPreferences : any;

 constructor(private http : Http){
 };

 ngOnInit(){
   this.statsUserPreferences  = Global.userPreferences.stats;
   // Printing just for the question purpose
   console.log(this.statsUserPreferences);
 }
}

Now, in these sub components. I am getting undefined every time in the console. Is there any way that it should wait till the Global.userPreferences doesn't contain the values. Or is there other way to do the same. I just want that it should wait till the http request is completed and print whenever the values are store inside the Global.userPreferences.

End · Accepted Answer · 2018-08-30T11:46:13.363

You can use the async pipe and an *ngIf to wait for the http request to be completed before rendering the child components. Then use binding to pass the data down to the child component and receive it with an @Input().

dashboard.component.ts

public userPreferences$: Observable<any>;

ngOnInit(){
  this.userPreferences$ = this.http.get('/api/getUserPreferences').subscribe();
  })

dashboard.html

<app-analytics *ngIf="userPreferences$ | async as userPreferences" [userPreferences]="userPreferences"></app-analytics>

wait till the request completes in angular

1 Answers1