ngModel не работает над HTML, который вводится динамически

Я получаю ответ JSON от сервера, с помощью которого я создаю строку HTML и добавляю ее в DOM. HTML правильно обрабатывает, но единственная проблема заключается в том, что ngModel не работает.

Текст [(ngModel)] в .ts-файле отображается как [(ngmodel)] в HTML.

Функция, используемая для создания строки HTML и добавления в HTML ::

this.prefill.fetchCustomComponent().subscribe(data => {

  data.forEach(el => {
    this.customComponentObj.component_id = el.component_id;
    this.customComponentObj.component_value = ""
    this.customComponentArr.push(this.customComponentObj);

    let customElement = "";

    /* detect type of input  example Case taken for select*/
    if (el.type == 1) {
      // this is a text input
      customElement += '<div class="field-wrapper has-value"><input type="text" value="" id="' + el.component_id + '" class="form-ctrl" [(ngModel)]="" name="' + el + '" required enquiryInput/><label for="' + el.component_id + '">' + el.label + '</label>';
    }

    else if (el.type == 2) {
      // this is a checkbox
      customElement += '<br><div class="field-checkbox-wrapper"><input type="checkbox" value="" class="form-checkbox" id=""><label for="' + el.label + '">' + el.label + '</label></div>';
    }

    else if (el.type == 3) {
      // this is a select list
      customElement += '<div class="field-wrapper has-value"><select id="" class="form-ctrl" required name=""  [(ngModel)]="' + this.temporaryCustomComponentObjStore + '" (ngModelChange)="updateCustomComponent($event)" enquiryInput><option value=""></option>';

      let customArr = el.prefilled_data.split(",");
      let tempObj = {
        component_id: el.component_id,
        component_value: ""
      };
      //console.log(customArr);
      customArr.forEach(ob => {
        tempObj.component_value = ob;
        console.log(tempObj);
        customElement += '<option value="' + tempObj + '">' + ob + '</option>';
      });
      customElement += '</select><label for="">' + el.label + '</label></div>';
      console.log(customElement);
    }

    else if (el.type == 4) {
      //this is a select multiselect list 
      customElement += '<div class="field-wrapper has-value"><select id="" class="form-ctrl" required name="" multiple enquiryInput><option value=""></option>';
      let customArr = el.prefilled_data.split(",");
      console.log(customArr);
      customArr.forEach(ob => {
        customElement += '<option value="' + ob + '">' + ob + '</option>';
      });
      customElement += '</select><label for="">' + el.label + '</label></div>';
    }

    /* update the HTML DOM */
    document.getElementById('custom-component-section').innerHTML += customElement;
  });
});

Создан компонент HTML ::

<div class="field-wrapper has-value">
<select id="" class="form-ctrl" required="" name="" [(ngmodel)]="[object Object]" (ngmodelchange)="updateCustomComponent($event)" enquiryinput="">
<option value=""></option>
<option value="[object Object]">Academics</option><option value="[object Object]">
Foundation
</option>
<option value="[object Object]">
IIT-JEE
</option>
</select>
<label for="">Scholarship</label>
</div>

заранее спасибо