Why is my checkoutData object not initializing properly?

I have the following data object:

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class CheckoutData {
email:string;
firstName:string;
lastName:string;
deliveryMethod: "Standard";
paymentMethod: "Credit Card";
}


I inject the object in the constructor of my component and log it to the console:

constructor(
private store: Store<{ checkoutStore; cartState }>,
public checkoutData:CheckoutData
) {
console.log('checkoutData constructor', this.checkoutData)
}


It logs garbage instead of the instantiated data object:

checkoutData constructor s {}[[Prototype]]: Object


Selecting radio buttons in my view than stores garbage in the data object:

<div class="form-check">
<input class="form-check-input" type="radio" id="formCheck-3" name="paymentMethod"
[(ngModel)]="checkoutData.paymentMethod" #paymentMethod=ngModel
(change)="saveCheckoutData()"
[value]="paymentMethod">
<label class="form-check-label" for="formCheck-3" style="font-size:
14px;">PayPal</label>
</div>

Continue reading...