title: How do you destroy an Angular 2 component without a ComponentFactory?
body: <p>When creating components dynamically through a ComponentFactory the ComponentRef that's returned provides a <a href="https://angular.io/api/core/ComponentRef#destroy" rel="noreferrer">destroy</a> method which works perfectly for what I'd like to accomplish.  With that in mind, it looks like all I need to do is a get a ComponentRef for a statically created component and then use its destroy function (which <a href="https://stackoverflow.com/questions/38676997/angular-2-destroy-child-component">this answer</a> states), but when I try this I get an error saying that "destroy is not a function" even though I do get an object back.</p>
  
  <p>Here's the syntax I'm using for ViewChild:</p>
  
  <pre><code>@ViewChild(MyComponent) myComponentRef: ComponentRef&lt;MyComponent&gt;;
  </code></pre>
  
  <p>And my "destroy" call:</p>
  
  <pre><code>private destroy() {
      this.myComponentRef.destroy();
  }
  </code></pre>
  
  <p>Which is triggered here:</p>
  
  <pre><code>&lt;button (click)="destroy()"&gt;Destroy&lt;/button&gt;
  </code></pre>
  
  <p>Calling this "destroy" method works for components that I create dynamically, but not statically.</p>
  
  <p>Edit:  <strike>So it seems like this does partially remove the component, but not from the DOM, which is not the same behavior that occurs when calling "destroy" on a dynamically created component.  Additionally, my click event function still fires when I click on a component that I've tried to destroy.</strike></p>
  
  <p>Edit 2:  I updated my ViewChild syntax to explicitly read for a ComponentRef and I get "undefined" back:</p>
  
  <pre><code>@ViewChild(MyComponent, {read: ComponentRef}) myComponentRef: ComponentRef&lt;MyComponent&gt;;
  </code></pre>
  
  <p>If that returns "undefined" then I'm guessing this may not be possible.</p>