How to assign value to interface property from http/async call in Angular?

Question

I have a service that returns a JSON object and I want to assign this data to an interface property. Here is the following code, the component.ts code here has been stripped down to contain only the relevant parts.

Service.ts file

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  public getFanSpeed(){
    return this.httpClient.get('http://localhost:4000/auth/get-fan-speed');
  }
}

Component.ts file

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../api.service';

interface CardSettings {
  content: string;
}

@Component({...})
export class DashboardComponent implements OnInit {
  fanSpeed: string;

  ngOnInit() {
    this.apiService.getFanSpeed().subscribe((response)=>{
      this.fanSpeed = response['fanSpeedVar'];
    });
  }

  fanSpeedCard: CardSettings = {
    content: this.fanSpeed
  };

  constructor(private apiService: ApiService) {}
}

I put a console.log inside the ngOnInit() function and I can see the correct value but for some reason it's just not getting assigned properly to the interface property, hence is just empty in the UI. Any guidance will be appreciated, thank you.

`fanSpeedCard` runs instantly. But the API call will take time to get resolved. You can assign the `fanSpeedCard` value inside the subscribe block — bharat1226, Jun 22 '20 at 20:28
Does this answer your question? [How to return object from service to component in angular](https://stackoverflow.com/questions/55605849/how-to-return-object-from-service-to-component-in-angular) — wentjun, Jun 22 '20 at 20:40

score 1 · Accepted Answer · answered Jun 22 '20 at 20:36

In your code the fanSpeedCard is a property that is assigned value of object (with CardSettings interface) at your class (DashboardComponent) construction time:

fanSpeedCard: CardSettings = {
    content: this.fanSpeed
};

Since fanSpeed is initially not defined (only type as string) and since you are not updating CardSettings object inside API response - your UI does not change.

As mentioned in the comment you need to make sure you update the value of the CardSettings' content property inside the subscribe block (not just fanSpeed):

gOnInit() {
    this.apiService.getFanSpeed().subscribe((response)=>{
      this.fanSpeed = response['fanSpeedVar'];
      this.fanSpeedCard.content = this.fanSpeed;
    });
}

Thanks for the explanation Sergey! It's working perfectly now. — Controless, Jun 22 '20 at 20:48

Shuvojit Saha · Answer 2 · 2020-06-22T21:17:10.730

You didn't correctly update fanSpeedCard's content porperty value in ngOnInit(). In ngOnInit() you reassigned the this.fanSpeed value. Here you should assign the service response value to fanSpeedCard's content property.

The following solution will solve your issue.

Component.ts file

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../api.service';

interface CardSettings {
  content: string;
}

@Component({...})
export class DashboardComponent implements OnInit {
  fanSpeed: string;

  ngOnInit() {
    this.apiService.getFanSpeed().subscribe((response)=>{
      this.fanSpeed = response['fanSpeedVar']
      this.fanSpeedCard.content = this.fanSpeed;
    });
  }

  fanSpeedCard: CardSettings = {
    content: this.fanSpeed
  };

  constructor(private apiService: ApiService) {}
}

How to assign value to interface property from http/async call in Angular?

2 Answers2