Myujth

I have a requirement to form html tag based on conditions in .ts file and bind it with innerHTML of div component as below :

my.component.ts:

var htmlTag = '';
if (fieldType === 'LOV') 
 htmlTag = '<select type="text" class="form-control" id="' + id + '" name="' + id + '" >' +
 '<option disabled selected>Select</option>';
 for (var i = 0; i < this.entityParameters.length; i++) 
 if (this.entityParameters[i].parameter_name === parameterName) 
 htmlTag = htmlTag + '<option>' + this.entityParameters[i].lov_value + '</option>'
 
 
 htmlTag = htmlTag + '</select>';
 else if (fieldType === 'NUMBER') 
 htmlTag = '<input type="number" class="form-control" id="' + id + '" name="' + id + '">';
 console.log(id)
 else if (fieldType === 'DATE')
 htmlTag = '<input type="date" class="form-control" id="' + id + '" name="' + id + '">';
else if (fieldType === 'VARCHAR')
 htmlTag = '<input type="text" class="form-control" id= "' + id + '" name="' + id + '">';

this.parametersHTML = this.parametersHTML +
 '<div class="row">' +
 '<div class="col-sm-1"></div>' +
 '<div class="col-sm-4">' +
 '<label for="' + id + '" style="line-height: 2.2">' + parameterName + '</label>' +
 '</div>' +
 '<div class="col-sm-4">' + htmlTag +
 '</div>' +
 '</div>';
}

Note: Here entityParameters contains the JSON data which I get after consuming a Rest API.

my.component.html:

<form #frmParam="ngForm">
 <div class="form-group">
 <div [innerHTML]="parametersHTML | sanitizeHtml" class="jumbotron">
 </div>
 </div>
</form>

After the form is rendered in UI, I am trying to access form fields value as JSON in .html file.
Somehow the binding is not working. I tried the same with [(ngModel)] too but the Angular tags are not getting rendered.
Can anyone please help me with this?