Angular: How to bind an array model attribute to a copy able div element

First of all I apologize for the bad title, I wasn’t sure exactly how to describe it.

I have this div for the user to enter contact information pertaining to a “program” for which the user also entered data. Right now you can only enter 1 set of contact information in this div:

<div id="programContactContainer" class="container">

      <div id="programContact">
        <div class="form-group mt-2">
          <label>Name</label>
          <input type="text" class="form-control" id="contactName"
                 required
                 [(ngModel)]="model.contact.name" name="contactName">
        </div>

        <div class="form-group mt-2">
          <label>Email</label>
          <input type="text" class="form-control" id="contactEmail"
                 required
                 [(ngModel)]="model.contact.email" name="contactEmail">
        </div>

        <div class="form-group mt-2">
          <label>Phone</label>
          <input type="text" class="form-control" id="contactPhone"
                 required
                 [(ngModel)]="model.contact.phone" name="contactPhone">
        </div>
        <br>
        <hr/>
      </div>
    </div>

    <input class="btn btn-primary" type="button" value="Add another contact" (click)="cloneContactDiv()">

If you click that button it adds an identical div below the existing one so the user can enter multiple contacts.

Code for copying div:

  cloneContactDiv(){
    const myDiv = document.getElementById(('programContact'));
    const divClone = myDiv.cloneNode(true);
    document.getElementById('programContactContainer').append(divClone);
  }

This is the model for both the program and the contact info (I know that not all of this is used in the question but I thought it might help):

export class ContactModel {
  name: string;
  email: string;
  phone: string;
}

export class ProgramModel {
  category: string;
  name: string;
  description: string;
  shortDescription: string;
  support: string [];
  address: string;
  location: [];
  areaServed: string;
  baseLocation: string;
  website: string;
  topic: string [];
  ownerLid: string;
  keywords: string[] = [];
  startDate: Date;
  endDate: Date;
  notification: boolean;
  daysForNotice: number;
  filter: string [];
  active: boolean;
  /// Contacts
  contact = new ContactModel();
  /// Departments
  departmentContact = new ContactModel();
}

If I change contact = new ContactModel(); to contact: ContactModel[] = []; then I can save an array of them, but I have no idea how to handle this in the html page. As you can see, the contact info was bound like this: [(ngModel)]="model.contact.name", but how do I handle that when there is more than 1 and an unknown number of how many?