title: How to pass ngModel from child to parents (child to parent to parent)?
body: <p>I have a couple for parent components using <strong>Template driven form</strong>:</p>
  <pre><code>user-data.components.ts
  admin-data.components.ts
  customer-data.components.ts
  </code></pre>
  <p>The form elements in those components are child component using <code>NG_VALUE_ACCESSOR</code>:</p>
  <pre><code>app-input.component.ts
  </code></pre>
  <p>which is being bind it in each of the parents like:</p>
  <p><strong><code>&lt;app-input name=&quot;xxxx&quot; [(ngModel)]=&quot;yyyy&quot; ....&gt;&lt;/app-input&gt;</code></strong></p>
  <p>In the other hand, I have in each of those parent components some default fields e.g. <strong>firstName</strong> and <strong>lastName</strong></p>
  <p>So for the default fields, I want to created an extra component: <strong><code>default-fields.component.ts</code></strong> with <strong><code>firstName</code></strong> and <strong><code>lastName</code></strong>:</p>
  <p><strong><code>&lt;app-input name=&quot;firstName&quot; [(ngModel)]=&quot;yyyy&quot; ....&gt;&lt;/app-input&gt;</code></strong></p>
  <p><strong><code>&lt;app-input name=&quot;lastName&quot; [(ngModel)]=&quot;yyyy&quot; ....&gt;&lt;/app-input&gt;</code></strong></p>
  <p>to add it once in the parents.</p>
  <p>My issue is that I can pass the <code>ngModel</code> from <strong><code>app-input.component.ts</code></strong> to <strong><code>default-fields.component.ts</code></strong> but not one level more deeper. For example to <code>user-data.components.ts</code></p>
  <p>In <code>default-fields.component.ts</code> I use <strong><code>viewProviders: []</code></strong> like:</p>
  <pre><code>@Component({
      selector: .....,
      templateUrl: .....,
      viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
  })
  </code></pre>
  <p>Is my concept totally wrong? Am I just implementing it in the wrong way?</p>