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 — bharat.goli
– bharat.goli, Commented Jun 22, 2020 at 20:28
Does this answer your question? How to return object from service to component in angular — wentjun
– wentjun, Commented Jun 22, 2020 at 20:40

Sergey Rudenko · Accepted Answer · 2020-06-22 20:36:16Z

1

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;
    });
}

answered Jun 22, 2020 at 20:36

Sergey Rudenko

9,2653 gold badges33 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Controless Over a year ago

Thanks for the explanation Sergey! It's working perfectly now.

Shuvojit Saha · Accepted Answer · 2020-06-22 21:17:10Z

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) {}
}

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related