如何使用 ngTemplateOutlet 上下文（Angular7）保留双向绑定

Question

I need to setup some configuration forms, which will be shown on screen dynamically. The object behind the logic is deeply nested, so I need to react to its structure (eg using ngFor). Since content on different layers inside the object can have the same presentation I am trying to outsource input-fields as templates. When, after some for-loops I call my templated-HTML, passing the actual value using context, two-way-binding for data does not work within the template. It seems, that obviously the value is passed and not the reference. Passing keys etc. also is no option here since the objects content is complex and dynamic, which is why I need to make input bind from ng-template.

Eg in component.ts setup an object

test = {time:"08:00"};

In component.html insert:

<div>
  {{ test.time }}
  <input type="time" [(ngModel)]="test.time"> <!-- works as expected, value changes on input-->
  <ng-template *ngTemplateOutlet="tmplInputTime; context: { value:test.time }"></ng-template>
</div>

<ng-template #tmplInputTime let-value="value">
    <input type="time" [(ngModel)]="value" > <!-- value not changing on input-->
</ng-template>

What am I missing here? Thanks in advance for help on this one!

Answer 1

Instead of passing the value pass whole object something like

<div>
  {{ test.time }}
  <ng-template *ngTemplateOutlet="tmplInputTime; context: { value:test}"></ng-template>
</div>

<ng-template #tmplInputTime let-value="value">
    <input type="time" [(ngModel)]="value.time" > <!-- value not changing on input-->
</ng-template>

working demo