Привязка входного элемента через innerHtml с помощью [(ngModel)]

Question

У меня есть файл компонента TS, как показано ниже

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(){}

}

В моем шаблоне я вставляю HTML, используя метод innerHtml, как показано ниже

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

Таким образом, он отображает вывод как поле ввода, но значения ngModel не отображаются в поле ввода.

Я также попытался использовать sanitize, но значение модели не вставляется в поле ввода.

Дезинфицировать пробовали 2 способами вроде,

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

Как этого добиться, используя angular2/4/5?

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