title: How to get the template driven form data on parent component submit button
body: <p>I have a child component in which I have rendered the text <code>form input controls</code>. My submit button is rendered in parent component so while submitting the <code>form</code> I am getting the empty <code>data</code>.</p>
  
  <p><strong>parent-component.html</strong></p>
  
  <pre><code>&lt;form #f="ngForm" name="myForm"&gt;
  
  &lt;app-text [users]="users"&gt;&lt;/app-text&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button (click)="save(f)"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>parent.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {
    NgForm
  } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class ParentComponent  {
  
    public users = {
      'firstname' :'',
      'lastname' :''
      };
  
    public constructor()
    {
  
    }
  
    save(myForm:NgForm)
    {
      console.log(myForm.value);
    }
  }
  </code></pre>
  
  <p><strong>child.component.ts</strong> (TextComponent)</p>
  
  <pre><code>import { Component,Input } from '@angular/core';
  
  @Component({
    selector: 'app-text',
    templateUrl: './text.component.html',
    styleUrls: [ './text.component.css' ]
  })
  export class TextComponent  {
    @Input() users:any;
  }
  </code></pre>
  
  <p><strong>child.componet.html</strong></p>
  
  <pre><code>&lt;label&gt;Enter the First Name&lt;/label&gt;
  &lt;input type="text" [(ngModel)]="users.firstname" name="firstname"&gt;
  
  &lt;label&gt;Enter the Last Name&lt;/label&gt;
  &lt;input type="text" [(ngModel)]="users.lastname" name="lastname"&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule,NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  
  import { AppComponent } from './app.component';
  import { TextComponent } from './text/text.component';
  
  @NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, TextComponent],
    bootstrap:    [ AppComponent ],
    schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Here I am submitting my form with values and trying to fetch the data into save method of parent component but I am getting the empty data.</p>
  
  <p>How can I achieve it? is there any other way to achieve it?</p>
  
  <p>Please help me. Thanks.</p>