Wait for Http response in angular 5

Question

I'm working on Angular-calendar. I want to wait for HTTP response before component loads in Angular-5.

Calendar component.ts :-

I want to show data from service in this.totallist,

  events: CalendarEvent[] =  this.totallist; // I have show data here which is fetched from database.

  ngOnInit() {
       this.eventlist.getEvents().subscribe(
         data => {
             console.log(data);
             let MyObj = JSON.parse(data);
             let event_data_1 = [];
             let outage_list = MyObj.outageList;
             console.log(outage_list);
              let startdate = outage_list[0].actualStartDateTime;
              let enddate = outage_list[0].actualStartEndTime;                      
              // console.log(startdate);
              let converted_startdate = this.cleanDate('/Date('+startdate+')/'); 
              let converted_enddate = this.cleanDate('/Date('+enddate+')/');                       
              console.log(converted_startdate);
              console.log(converted_enddate);
              for(let i=0;i<1;i++)
              {
                  let sub_object = {
                      start: new Date(),
                      end: new Date(),
                      title: 'A 3 day event',
                      color: colors.red,
                      actions: this.actions
                  }
                  event_data_1.push(sub_object);
              }
              this.totallist = event_data_1;
              console.log(this.totallist);
              return this.totallist;
         }
        );
       // this.column_data = column_data;
  }

service.ts :-

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Injectable()
export class ApiNewsResolver {

    getEvents(): Observable<any>{
          return this.http.get('http://localhost:8080/MacromWeb/ws/Calendar').map(data => data['_body']);

    }
  constructor(private http: Http) { 

  }
}

Now I want to load API service first and then load component. How can I achieve this task in Angular-5 ?

If any need I can show my whole component code.

Answer 1

Your component must be loaded, but you can load and unload HTML parts with *ngIf directive. Just check if your array is empty. More on that here.

Also, you may wanna check out Angular Interceptors

Answer 2

Just store your data inside the subscribe:

events: CalendarEvent[]; // I have show data here which is fetched from database.

  ngOnInit() {
       this.eventlist.getEvents().subscribe(
         data => {
             console.log(data);
             let MyObj = JSON.parse(data);
             let event_data_1 = [];
             let outage_list = MyObj.outageList;
             console.log(outage_list);
              let startdate = outage_list[0].actualStartDateTime;
              let enddate = outage_list[0].actualStartEndTime;                      
              // console.log(startdate);
              let converted_startdate = this.cleanDate('/Date('+startdate+')/'); 
              let converted_enddate = this.cleanDate('/Date('+enddate+')/');                       
              console.log(converted_startdate);
              console.log(converted_enddate);
              for(let i=0;i<1;i++)
              {
                  let sub_object = {
                      start: new Date(),
                      end: new Date(),
                      title: 'A 3 day event',
                      color: colors.red,
                      actions: this.actions
                  }
                  event_data_1.push(sub_object);
              } 
              this.events =  event_data_1; 
         }
        );
       // this.column_data = column_data;
  }