Creating a Generic Registration Component in Angular for Any Model

I'm trying to create a generic registration component in Angular that can handle registration forms for various models. The idea is to have a single component, let's call it RegistrationComponent, that can dynamically generate HTML input fields based on the properties of the model it receives.

For instance, I have two classes Product and SalesRepresentative as follows:

export class Product implements Persistable { 
  id!: number;
  code!: string;
  name!: string;
  purchasePrice!: number;
  brand!: string;
  manufacturer!: string;
}

export class SalesRepresentative implements Persistable {
  id!: number;
  personalData!: PersonalData;
}

And I want to use the RegistrationComponent to generate registration forms for both of these classes. Here's the HTML structure that I want to generate for the Product class as an example:

 <div class="col-md-12">
  <div class="card card-user">
    <div class="card-header">
    </div>
    <div class="card-body">
      <form (ngSubmit)="submitForm()">
        <!-- Dynamically generated input fields based on Product properties -->
        <div class="row">
          <!-- Input field for code -->
          <div class="col-md-4 pr-1">
            <div class="form-group">
              <label>Code:</label>
              <input type="text" class="form-control" placeholder="Code" [(ngModel)]="product.code" name="code">
            </div>
          </div>
          <!-- Input field for name -->
          <div class="col-md-5 px-1">
            <div class="form-group">
              <label>Name:</label>
              <input type="text" class="form-control" placeholder="Name" [(ngModel)]="product.name" name="name">
            </div>
          </div>
          <!-- Input field for purchasePrice -->
          <div class="col-md-3 pl-1">
            <div class="form-group">
              <label for="purchasePrice">Purchase Price:</label>
              <input type="text" class="form-control" placeholder="Purchase Price" id="purchasePrice" [(ngModel)]="product.purchasePrice" name="purchasePrice" appRealMask>
            </div>
          </div>  
        </div>
        <!-- Additional input fields for Product properties -->
        <div class="row justify-content-around">
          <!-- Input field for brand -->
          <div class="col-md-5 pr-1">
            <div class="form-group">
              <label for="brand">Brand:</label>
              <input type="text" class="form-control" placeholder="Brand" id="brand" [(ngModel)]="product.brand" name="brand">
            </div>
          </div>    
          <!-- Input field for manufacturer -->
          <div class="col-md-5 px-1">
            <div class="form-group">
              <label for="manufacturer">Manufacturer:</label>
              <input type="text" class="form-control" placeholder="Manufacturer" id="manufacturer" [(ngModel)]="product.manufacturer" name="manufacturer">
            </div>
          </div>        
        </div>
        <!-- Submit button -->
        <div class="row text-center">
          <div class="col-md-12 pr-1 px-1">
            <div class="update ml-auto mr-auto">
              <button type="submit" class="btn btn-outline-secondary">Save Data</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>