Binding input element through innerHtml with [(ngModel)]

Question

I have a component ts file like below

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

@Component({
  template: '<div [innerHtml]='htmlContent'></div>'
})

export class DesignComponent implements OnInit {

modelValue='abcd';

htmlContent='<input type="text" [(ngModel)]="modelValue" name="model"> ';

constructor(){}

}

In my template, I am inserting html using innerHtml method like below

<div [innerHtml]='htmlContent'></div>

So, it is displaying output as input box, but ngModel values not rendering into the input box.

I tried using sanitize also, Still model value not inserting into input box.

Sanitize tried in 2 ways like,

this.htmlContent= this.sanitizer.bypassSecurityTrustHtml(htmlContent);
this.htmlContent= this.sanitizer.sanitize(SecurityContext.HTML, htmlContent);

How to achieve this using angular2/4/5?

Thanks in advance