How to pass variable in component.html on page load Ajax request in Angular 11

Question

I have made a component and on html of that i want to have a variable, whose value is coming from ajax response in ngOnInit.

Problem is when i am trying to set the variable from object which is i am getting from ajax is give me undefined. May be ajax call is still running while it sets the variable. I want to ask how i can set the variable.

export class mainPage implements OnInit {
    public backgroundData: any;
    public backgroundImagePath : string = '';
  constructor(private $state: StateService, private MyService : MainServicesService) {
  }

ngOnInit(): void {
      this.getBackground();
      console.log(this.backgroundData);
      this.backgroundImagePath = environment.BaseUrl+this.backgroundData.folder+this.backgroundData.file;
  }

getBackground(){
      let client = this.client_id;
      this.MyService.getClientInfo(client)
          .subscribe(
              (data) => {
                  this.backgroundData  = data;

              } ,
              error => console.log(error)
          )
  }

I have also tried to put it in the constructor but no success.

Here is where i want to get the variable in html.

<div [ngStyle]="{'background-image': 'url(' + backgroundImagePath + ')'}">

is `backgroundData` a public variable? Did you try setting a default value like '' for the `backgroundData` variable? — MaartenDev, Jun 01 '21 at 15:52
@MaartenDev Yes It is public variable let me update the question . :) — programmer, Jun 01 '21 at 15:53

MaartenDev · Accepted Answer · 2021-06-01T18:10:28.193

The HTTP call is indeed asynchronous and is not guaranteed to be finished when the next line is executed. An option would be to build the url when the request has finished:

export class mainPage implements OnInit {
    public backgroundData: any;
    public backgroundImagePath: string = '';

    constructor(private $state: StateService, private MyService: MainServicesService) {
    }

    ngOnInit(): void {
        this.loadBackground();

    }

    loadBackground() {
        let client = this.client_id;
        this.MyService.getClientInfo(client)
            .subscribe(
                (backgroundData: any) => {
                    this.backgroundImagePath = environment.BaseUrl + backgroundData.folder + backgroundData.file;
                },
                error => console.log(error)
            )
    }
}

Then it give me error for `Property 'folder' does not exist on type 'Object'. `and for file also same error. — programmer, Jun 01 '21 at 16:05
It works with backgroundData:any . Thanks Solve my Problem. Let me test it thoroughly. — programmer, Jun 01 '21 at 16:28

score -1 · Answer 2 · answered Jun 01 '21 at 15:53

-1

Javascript work on asynchronous. Please replace

ngOnInit() with async ngOnInit() this.getBackground() with await this.getBackground()

answered Jun 01 '21 at 15:53

Vicky Kumar

239
7
21

1

In this case he works with ```Observable``` not with ```Promise```. – tmsbrndz Jun 01 '21 at 15:54
@Vicky Kumar sorry did not understand your answer. – programmer Jun 01 '21 at 15:57

How to pass variable in component.html on page load Ajax request in Angular 11

2 Answers2