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

У меня есть файл компонента 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, значение модели все еще не вставляется в поле ввода.

Дезинфекция пробовала двумя способами:

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

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

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