Angular - Calling method on service from component returns undefined

Question

I have this service in the services file which is an http call.

    export class BackendServices {
      addons: IAddons[];   
      constructor(private http: HttpClient) { 
        this.getWorkOrders();
      }
     getAddons() {
      this.http.get<IAddons>(this.BASE_URL + '/addons/')
      .subscribe((data: any) => {
          this.addons = data;
      });
    }

COMPONENT PART Then from my main component I have a button which calls the modal dialog. Here is the code of the main component:

export class OrdersComponent { 
openAddonsDialog() {
    let dialogRef = this.pickAddonsDialog.open(PickaddonsComponent);
  }
}

And then I am calling the getAddons method which is on the service from the constructor of the dialog. I am just wondering how do we make the modal dialog open only when the addons property has received data from the http call.

export class PickaddonsComponent implements OnInit {
    constructor(public bs: BackendServices) {
        this.bs.getAddons();
    }

But it says this.service.getAddons() is undefined. Read a lot about this on stackoverflow, tried quite a few steps from different posts, but none helped me so far.

Answer 1

It seems that initialized BackendService has attribute addons undefined. Which is true. Because it is set only when calling method getAddons.

Try this:

export class BackendServices {
  addons: IAddons[] = [];   
  constructor(private http: HttpClient) { 
    this.getWorkOrders();
  }
 getAddons() {
  return this.http.get<IAddons>(this.BASE_URL + '/addons/')
  .subscribe((data: any) => {
      this.addons = data;
  });
}

Replacing

 addons: IAddons[];

with

 addons: IAddons[] = [];