Template variables are not binding to component variables

The values in my template are not getting bind to the component variables.

This is a segment of the template code:

<div class="col">
    <input class="form-control" type="text" required name="firstName" 
        [ngModel]="shipping.firstName" #firstName="ngModel">
</div>

This is the component. The inputs from the template are supposed to be bind to the shipping object of the component when the "Place Order" button is clicked in the template and the placeOrder() function logs the shipping object to the console. But the shipping object shows no value when logged.

import { Component, OnInit } from '@angular/core';

import {Shipping, Payment} from '../shared/models/data-models';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
  styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
  private shipping:Shipping;

  constructor() { 
    this.shipping = new Shipping();
  }

  private placeOrder() {
    console.log('shipping', this.shipping)    
  }
}

This is the shipping model:

export class Shipping {
    firstName: string;
    lastName: string;
    email: string;
    phone: string;
}