View is rendering before API response is ready from subscribe

Question

I am fetching data from API response,

The problem is sometimes html renders before Response ready from subscribe().

so the problem is html doesn't load data it appears blank. its important here to load html only after API response is ready.

Here is my service

service.ts

getItinerary(){
        let params={
            "Module_SRNO": "",
            "Screen_SRNO":"",
            "Type": "Itinary",
            "Unit": 0 ,
            "Location": 0,
            "Branch":"0",
            "UserId": 0,
            "Ip": "0",
            "Corporate": this.corporate,
            "InquiryCode": this.InquiryCode,
            "QuoteCode": this.QuoteCode
            }
        return this.http.post(this.url,params)
        .map(res=>res.json())
        .catch(this.errorHandler);
}

Component.ts

getItinerary(){
    this.quoteService.getItinerary()
    .subscribe(itinerary => {
      this.itinerary = itinerary.resultData.Itinary;
      this.Itns = asEnumerable(this.itinerary).GroupBy(x => x.CheckinDay,  x => x,
         (key, b) =>          
         { return { 
           CheckinDay: key ,itineraries: asEnumerable(b).ToArray() }
            })
        .ToArray();  
    },
    response => {
     if (response.status == 404) {
        }
    })
  }

I'm using ngOnInit for calling function

ngOnInit() {
    this.getItinerary();
}

also tried to call function from constructor also

component.html

    
   
      tour ITINerary
      Highlights Of Your Journey
   
             
      
                             
            
               
                  
                     
                  
                  
                     
                  
               
               
                  
                     
                       
                        
                           
                        
                     
                     
                        
                           Day {{itinerary.itineraries[0].CheckinDay}}
                        
                        
                           
                              
                                        
                                    {{itinerary.itineraries[0].CityName}}
                                    {{itinerary.itineraries[0].CheckinDate | date}}
                                                                           
                                 
                                    
                                       
                                          
                                             
                                                
                                                   
                                                
                                                
                                                   {{itn.Checkintime}}
                                                   {{itn.IternaryText}}
                                                                                                
                                             
                                          
                                       
                                    
                                    
                                       
                                          
                                           
                                             
                                             Sightseen :
                                             {{itn.TourDelight}}

How can I make sure that view render only after response is ready?

ZAhmed · Accepted Answer

You can make a simple service that do not load the page until all component is ready. Look for this:

import {EventEmitter, Injectable} from '@angular/core';

      @Injectable()
      export class LoadPageService {
          private isReady= false;
          // Event emitter that make event each time the variabe isReady changes
         Updated: EventEmitter = new EventEmitter();
        setdata( value) {
          this.isReady = value;
            this.Updated.emit(this.isReady);
        }

          getdata() {
          return this.isReady;
        }

      }

And in you component do this:

       ` isReady:boolean;
         ngOnInit() {
        this.isReady = false;
       this.loadpage.setdata(this.isReady);

    this.httpService.GetPic('/manger').subscribe(
      (data: any) => { 

      // You code Here to get data from server or other API

       this.isReady = true;
       this.loadpage.setdata(this.isReady);


      }
  }

`

View is rendering before API response is ready from subscribe

Answers (1)

Related Questions