title: How to set component back to initial state in Angular 2
body: <p>I have a component that is a modal which has a form and some other variables outside of that form. The component is something like this:</p>
  
  <p>The component: </p>
  
  <pre><code>export class PersonComponent implements OnInit { 
  
  countPerson: number=0;
  persons: Person [] = [];
  
  personForm : FormGroup;
  
  ngOnInit(){
    this.step1Form= this.fb.group({
       firstName: 'Levi',
       lastName:  'Ackerman'
    });
  }
  
  submitPerson(person: Person){
    this.persons.push(person);
    this.incrementPerson();
  }
  
  incrementPerson(){
    this.count++;
  }
  
  }
  </code></pre>
  
  <p>In the template:</p>
  
  <pre><code> &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body&gt;
           &lt;label&gt;First Name&lt;/label&gt;
           &lt;input type="text" formControlName="firstName"&gt;
           &lt;label&gt;LastName Name&lt;/label&gt;
           &lt;input type="text" formControlName="lastName"&gt;
           &lt;button type="button" (click)="submitPerson()"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
       &lt;div class="modal-footer"&gt;
           &lt;button type="button" data-dismiss="modal"&gt;Close&lt;/button&gt;
       &lt;/div&gt;
     &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to reset the form controls back to initial values and as well set the variables outside of the form back to initial value. So basically I want the whole component be back to initial state. I want the component be reset to initial state once closed.</p>