Angular 13: What is wrong with my HTTP Get Request?

Question

I've tried many formats and feel like I am almost there. I have no idea what is wrong with this get request.

I've been following tutorials via Pluralsight and have followed exactly what they're doing. No luck either way.

Please provide some assistance. Thank you so much!!

Here are the console errors:

ERROR TypeError: Cannot read properties of undefined (reading 'getProductId')
    at StepperComponent.ngOnInit (stepper.component.ts:33:24)
    at callHook (core.mjs:2542:1)
    at callHooks (core.mjs:2511:1)
    at executeInitAndCheckHooks (core.mjs:2462:1)
    at refreshView (core.mjs:9499:1)
    at refreshComponent (core.mjs:10655:1)
    at refreshChildComponents (core.mjs:9280:1)
    at refreshView (core.mjs:9534:1)
    at renderComponentOrTemplate (core.mjs:9598:1)
    at tickRootContext (core.mjs:10829:1)

quotes.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Products } from '../models/products';

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

  constructor(private http: HttpClient) {}

  // GET Destination Countries:
  private destinationUrl = <my-url>

  // GET Request - subscribe in component.ts
  getProductId(): Observable<Products[]> {
    return this.http.get<Products[]>(this.destinationUrl, {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': 'bearer <my-token>'
    }),
  });
}
}

stepper.component.ts file

export class StepperComponent implements OnInit {


  //declare quotesService
  quotesService: any;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.quotesService.getProductId().subscribe(
      (data: Products[]) => (this.quotesService = data),
      (err: any) => console.log(err)
    );
  }

  onSubmit() {
    console.log('Submit Works');

  }
}

products.ts file:

export interface Products {
  product_id: number,
  age: number,
  currency_id: string,
  destination_country_ids: string,
  host_country_id: string,
  country_state: string, // if host country = US (optional)
  start_date: Date,
  end_date: Date,
  trip_cost: number,
  deposit_date: Date,
  winter_sports_extension: boolean
}

Answer 1

To inject the service, you need to add it to the constructor arguments, like it is done with the FormBuilder service. See the docs.

Updated stepper.component.ts file:

export class StepperComponent implements OnInit {

  constructor(private _formBuilder: FormBuilder,
              private quotesService: QuotesService) {}

  ngOnInit() {
    this.quotesService.getProductId().subscribe(
      (data: Products[]) => (this.quotesService = data),
      (err: any) => console.log(err)
    );
  }
}