Input values from exported class are not recognized, resulting in an error rendering them as Undefined

Issue

I am on Ionic Framework 6.13.1, and I have 2 services with the same structure of code. I have an appointment.service.ts and a registration.service.ts. Each of these services refers to a separate Typescript file containing only an exported class for storing values, with the class for registration.service.ts being in Registration.ts and the one for appointment.service.ts being in Appointment.ts. Here is the code for each of the aforementioned files:

appointment.service.ts:

import { Injectable } from '@angular/core';
import { Appointment } from '../shared/Appointment';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class AppointmentService {
  bookingListRef: AngularFireList<any>;
  bookingRef: AngularFireObject<any>;

  constructor(private db: AngularFireDatabase) { }

  // Create
  createBooking(apt: Appointment) {
    return this.bookingListRef.push({
      name: apt.name,
      email: apt.email,
      mobile: apt.mobile,
      car: apt.car,
      image1: apt.image1,
      minPrice: apt.minPrice,
      maxPrice: apt.maxPrice,
      steps: apt.steps
    })
  }

  // Get Single
  getBooking(id: string) {
    this.bookingRef = this.db.object('/appointment/' + id);
    return this.bookingRef;
  }

  // Get List
  getBookingList() {
    this.bookingListRef = this.db.list('/appointment');
    return this.bookingListRef;
  }

  // Update
  updateBooking(id, apt: Appointment) {
    return this.bookingRef.update({
      name: apt.name,
      email: apt.email,
      mobile: apt.mobile,
      car: apt.car,
      image1: apt.image1,
      minPrice: apt.minPrice,
      maxPrice: apt.maxPrice,
      steps: apt.steps
    })
  }

  // Delete
  deleteBooking(id: string) {
    this.bookingRef = this.db.object('/appointment/' + id);
    this.bookingRef.remove();
  }
}

Appointment.ts:

export class Appointment {
    $key: string;
    name: string;
    email: string
    mobile: number;
    car: string;
    image1: string;
    minPrice: number;
    maxPrice: number;
    currentPrice: number;
    steps: number;
}

registration.service.ts:

import { Injectable } from '@angular/core';
import { Registration } from '../shared/Registration';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class RegistrationService {
  bookingListRef: AngularFireList<any>;
  bookingRef: AngularFireObject<any>;

  constructor(private db: AngularFireDatabase) { }
  
  // Create
  createBooking(apt: Registration) {
    return this.bookingListRef.push({
      name: apt.name,
      mobile: apt.mobile,
      email: apt.email,
      confirmEmail: apt.confirmEmail
    })
  }

  // Get Single
  getBooking(id: string) {
    this.bookingRef = this.db.object('/Registration/' + id);
    return this.bookingRef;
  }

  // Get List
  getBookingList() {
    this.bookingListRef = this.db.list('/Registration');
    return this.bookingListRef;
  }

  // Update
  updateBooking(id, apt: Registration) {
    return this.bookingRef.update({
      name: apt.name,
      mobile: apt.mobile,
      email: apt.email,
      confirmEmail: apt.confirmEmail
    })
  }

  // Delete
  deleteBooking(id: string) {
    this.bookingRef = this.db.object('/Registration/' + id);
    this.bookingRef.remove();
  }
}

Registration.ts:

export class Registration {
    $key: string;
    name: string;
    mobile: number;
    email: string;
    confirmEmail: string;
}

When referencing these two services in my make-appointment.page.ts file, I have no issues when a user types in their inputs, but in my registration.page.ts file, as soon as the user submits their inputs, an error is given in the console, stating:

ERROR TypeError: Cannot read property 'push' of undefined

Why are my inputs recognized in my Make-Appointment page but not in my Registration page?

Any help would be greatly appreciated, thank you.

Solution

As @Ravikumar mentions, it seems like your bookingListRef isn't initialised.

It could be amended by retrieving the list when your services are constructed. Simply call callBookingList() in the constructor, eg.:

constructor(private db: AngularFireDatabase) { 
    this.getBookingList()
}

Answered By - Anders