title: Angular6 - ngIf does not destroy object
body: <p>I have a parent component that will change the child's form that is passed as <code>@Input()</code> when a button is clicked. I use <code>ngIf</code> to render the child component, but when I click to change the form, the child component does not get destroyed and recreated.</p>
  
  <p>parent.component.ts</p>
  
  <pre><code>form: FormGroup;
  showChildForm: boolean;
  num: number;
  
  ngOnInit(){ 
     this.showChildForm = false; 
     this.num = 1;
     this.form = new FormGroup({group:{'name', new FormControl('name'+this.num,[])}})
  }
  
  changeForm(){
     this.num += 1;
     this.showChildForm = true; 
     this.form = new FormGroup({group:{'name', new FormControl('name'+this.num,[])}})
  }
  </code></pre>
  
  <p>parent.component.html</p>
  
  <pre><code>&lt;button (click)="changeForm()"&gt;&lt;/button&gt;
  &lt;child *ngIf="showChildForm" [form]="form"&gt;&lt;/child&gt;
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>@Input() form: FormGroup;
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
     &lt;input type="text" [formControl]="form.get('name')"/&gt;
  &lt;/form&gt;
  </code></pre>