ionic / angular 8 ERROR TypeError: this.sendData is not a function

Question

Here is my code. I am simply trying to do a GET to a localserver and take the response (which is a JSON object) and send it to a different angular component. For some reason it is saying ERROR TypeError: this.sendData is not a function

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

interface myData {
    data: Object
}

@Injectable({
    providedIn: 'root'
})
export class ApiService {

    goldProducts: any[] = [];
    httpOptions: any;

    constructor(private http: HttpClient) {}
    base_path = 'http://localhost:80';

    shareData = new Subject<any>();

    sendData(data: any) {
        this.shareData.next(data);
    }

    getGoldProducts() {
        this.httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',

            })
        }
        return this.http.get<myData>(this.base_path + '/get/goldProducts', this.httpOptions).subscribe(function(res) {
            console.log(res);
            this.sendData(res);
        });
    }
}

and the component it is going to is:

import { Component } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    goldProducts: any[] = [];

    getItemPrices: any[] = [];
    constructor(public api: ApiService, public http: HttpClientModule) { }

    displayGoldProducts() {
       this.api.shareData.subscribe(data => {
           console.log(data);
       });
       this.api.getGoldProducts();
    }
}

the function displayGoldProducts() is simply hooked up to a button in the html. I will get the correct console log of the response but only from the api.service. I am at a loss on how to hook this up. I just want an observable so when I push new data which are new prices from the server then the prices on the client will automatically update. Something simple to do in javascript but apparently a pain to do so far in angular. I am learning angular and the tutorials seem to cover different use cases. Any help would be appreciated and is probably just a formatting issue. Thankyou in advance.

Answer 1

use your arrow function like this

this.http.get<myData>
(this.base_path + '/get/goldProducts', 
this.httpOptions).subscribe
   (res => {
        this.sendData(res); 
  });

Answer 2

check out this

this.http.get<yourData>
(this.base_path + '/get/goldProducts', 
this.httpOptions).subscribe
   (res => {
//handle your data
        this.sendData(res); 
  });