Angular passing API response to child component

Question

I have a "Dashboard" component, and a "Dashboard-InfoBox" child component. In my Dashboard component I call a function in my service that returns the API response, and then I create a variable that holds the data that I want and pass it to Dashboard-InfoBox to render it.

The problem is that Dashboard-infobox tries to access the data while it's still not there, which causes errors in my console.

I have tried including *ngIf="marketData['HENRYHUB']", but the ngIf is not rendering it when the data comes.

market.service.ts


  getHenryHub() {
    const henryHubCache = this.responseCache.get(this.henryHubURL);
    if(henryHubCache) {
      console.log(henryHubCache);
      return of(henryHubCache);
    }
    const response = this.http.get(this.henryHubURL);
    response.subscribe(res => this.responseCache.set(this.henryHubURL, res));
    return response;
  }

dashboard.component.ts

this.marketData = {} as IDictionary;

    this.marketDataService.getHenryHub().subscribe(res => {
      let henryHub = {
        date: res["series"][0].data[0][0],
        price: res["series"][0].data[0][1].toFixed(2),
        status: res["series"][0].data[0][1] > res["series"][0].data[1][1] ? true : false,
      }
    this.marketData['HENRYHUB'] = henryHub;
    });

dashboard-infobox.component.ts

  @Input() marketData: any;

        
    
        
            Gas/Oil Prices
        
    

    
        
            Brent Oil
        
        
        
            {{ marketData.BRENT.price }} $/Bbl
        
        
            {{ date | date: 'MMM dd' }}
        
    

    
        
            Henry Hub
        
        
        
            {{ marketData.HENRYHUB.price }} $/MMBtu
        
        
            {{ date | date: 'MMM dd' }}
        
    

    
        
            NBP
        
        
        
            {{ marketData.NBP.price }} $/MMBtu
        
        
            {{ date | date: 'MMM dd' }}
        
    

    
        
            TTF
        
        
        
            {{ marketData.TTF.price }} $/MMBtu
        
        
            {{ date | date: 'MMM dd' }}
        
    

    
        
            Gas Oil
        
        
        
            {{ marketData.GASOIL.price }} $/Mt
        
        
            {{ date | date: 'MMM dd' }}

ERROR TypeError: Cannot read property 'price' of undefined

I get 4 errors in the console for each of these variables. However on my Dashboard everything shows exactly the way I want it.

SiddAjmera · Accepted Answer

In your dashboard-infobox Component Template, wrap the div with an *ngIf the way you were doing before you edited the question.

Plus, you should be good with just one img tag instead of two. You're showing them conditionally anyway.

Here, give this a try:


  
    Henry Hub
  
  
  
    {{ marketData.HENRYHUB.price }} $/MMBtu
  
  
    {{ date | date: 'MMM dd' }}

Angular passing API response to child component

Answers (2)

Related Questions