title: Angular ngAfterViewInit being called after every changeDetection
body: <p>From the angular docs for <code>ngAfterViewInit</code></p>
  
  <blockquote>
    <p><strong>ngAfterViewInit()</strong>  </p>
    
    <p>Respond after Angular initializes the component's
    views and child views.</p>
    
    <p>Called <strong>once</strong> after the first ngAfterContentChecked().</p>
    
    <p>A component-only hook.</p>
  </blockquote>
  
  <p>I have a component <strong>C</strong> which is nested inside component <strong>T</strong></p>
  
  <p>Component <strong>C</strong> implements the following hook.</p>
  
  <pre><code>ngAfterViewInit(): void {
          console.log("afterViewInit");
          debugger;
      }
  </code></pre>
  
  <p>Component <strong>T</strong> is a table - for which a change detection will occur whenever the user clicks a cell. </p>
  
  <p>Component <strong>C</strong> can be found in a table cell.</p>
  
  <p>Whenever I click the cell I can see <code>afterViewInit</code> logged in the console.</p>
  
  <p>And my stack trace is as follow :</p>
  
  <blockquote>
    <p><strong>DynamicComponentWrapper.ngAfterViewInit</strong> 
    (dynamic-component-wrapper.ts:72)
    <strong>View_TableComponent18.detectChangesInternal</strong>
    (/TableModule/TableComponent/component.ngfactory.js:904)
    AppView.detectChanges (view.js:425) DebugAppView.detectChanges
    (view.js:620) ViewContainer.detectChangesInNestedViews
    (view_container.js:67) View_TableComponent17.detectChangesInternal
    (/TableModule/TableComponent/component.ngfactory.js:962)
    AppView.detectChanges (view.js:425) DebugAppView.detectChanges
    (view.js:620) ViewContainer.detectChangesInNestedViews
    (view_container.js:67) View_TableComponent15.detectChangesInternal
    (/TableModule/TableComponent/component.ngfactory.js:1043)
    AppView.detectChanges (view.js:425)</p>
  </blockquote>
  
  <h2>Question</h2>
  
  <p>What is causing the ngAfterViewInit to be called on parent changes? Is the component being re-rendered - i.e - removed from the DOM and replaced?</p>
  
  <p>And how do I prevent this? - i.e - how do I ensure ngAfterViewInit is only called once</p>
  
  <p><strong>Update:</strong> 
  After changing both <strong>Component C</strong> and <strong>Component T</strong> to use <strong>ChangeDetectionStrategy.OnPush</strong> <code>afterViewInit</code> is still being called on any change.</p>