title: reset all inputs on angular 2 parent and child component
body: <p>I'm a Angular 2 newbie. After learning Angular 2, I made a demo app use parent and child component. The view of parent component has form element and a few inputs and view of child component has other inputs.
  This is my view of parent component</p>
  
  <pre><code>&lt;form #f="ngForm" (ngSubmit)="onSubmit(f)"&gt;&lt;div class="field clearfix w50" &gt;
                      &lt;label&gt;Destination &lt;span class="note"&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;div [class.has-error]="is_draft_validated &amp;&amp; !destination.value"&gt;
                          &lt;input type="text" name="destination" [(ngModel)]="TRequest.destination" #destination="ngModel" class="form-control"&gt;
                          &lt;span *ngIf="is_draft_validated &amp;&amp; !destination.value" class="error"&gt;{{ 'VALIDATE.required' | translate }}&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;payment-dietary *ngIf="TRequest.m_menu_request_id==9" [clear]="is_clear" [dietary]="TRequestDietary"&gt;&lt;/payment-dietary&gt;&lt;button class="btn btn-style btn-style-special btn-chart" type="submit"&gt;
                          &lt;i class="fa fa-bar-chart"&gt;&lt;/i&gt;&amp;nbsp;Save
                      &lt;/button&gt;
                      &lt;button class="btn btn-style btn-clear" (click)="onClear(f)"&gt;
                          &lt;i class="fa fa-eraser"&gt;&lt;/i&gt;&amp;nbsp;Reset
                      &lt;/button&gt;&lt;/form&gt;
  </code></pre>
  
  <p>And my view of child component</p>
  
  <pre><code>&lt;div class="field clearfix w100"&gt;
          &lt;label&gt;Participant Name &lt;span class="note"&gt;*&lt;/span&gt;&lt;/label&gt;
          &lt;div&gt;
              &lt;input type="text" name="participant_name" class="form-control" [(ngModel)]="Item.participant_name" #participant_name="ngModel" [class.ng-invalid]="participant_name?.dirty &amp;&amp; !participant_name.value"&gt;
              &lt;span *ngIf="participant_name?.dirty &amp;&amp; !participant_name.value" class="error"&gt;{{ 'VALIDATE.required' | translate }}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="field clearfix w50"&gt;
          &lt;label&gt;Participant Number &lt;span class="note"&gt;*&lt;/span&gt;&lt;/label&gt;
          &lt;div&gt;
              &lt;input type="text" name="participant_num" class="form-control numeric" [(ngModel)]="Item.participant_num" (keyup)="Item.participant_num = $event.target.value" #participant_num="ngModel" [class.ng-invalid]="(participant_num?.dirty || participant_num?.touched) &amp;&amp; !participant_num.value &amp;&amp; !clear" id="form_participant_num"&gt;
              &lt;span *ngIf="(participant_num?.dirty || participant_num?.touched) &amp;&amp; !participant_num.value" class="error"&gt;{{ 'VALIDATE.required' | translate }}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And child component code</p>
  
  <pre><code>import { Component, Input, AfterViewInit } from '@angular/core';
  import { TRequestDietary } from '../../../../models';
  
  @Component({
      selector: 'payment-dietary',
      templateUrl: './payment-dietary-form.component.html',
  })
  
  export class PaymentDietaryFormComponent{
      @Input('dietary') Item: TRequestDietary;
      @Input() clear: boolean;
  }
  </code></pre>
  
  <p>When I press button to reset form, I can only reset input on view of parent but can not reset inputs on view of child component. This is the code reset form</p>
  
  <pre><code>onClear(form: NgForm){
  form.reset();
  }
  </code></pre>
  
  <p>I don't know how to reset inputs on child component. Please help me</p>