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>

All I can see is a typo in ur class.

Should be

export class HelloService {
  email: string;
  firstName: string;
  lastName: string;
  deliveryMethod = 'Standard'; //typo
  paymentMethod = 'Credit Card'; //typo
}

stackblitz