title: Does not render child after ngif is applied to the mounted component
body: <p>My problem is different from this <a href="https://stackoverflow.com/questions/39366981/angular-2-viewchild-in-ngif?noredirect=1&amp;lq=1">answer</a>, my problem is the component initializes with ngif = true but I have the option to remove it by applying false, so far so good but the content does not render again, because ngAfterViewInit is not called again, I am again with angular and I do not know the angular life cycle. <strong>Summary, my problem is how to remove and add with ngIF and render the contents of the component.</strong></p>
  
  <p>initiliaze componenet
  openGraph5 = true;</p>
  
  <blockquote>
    <p>component.ts</p>
  </blockquote>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, ContentChild } from '@angular/core';
  import { ChartDataSets, ChartOptions, Chart } from 'chart.js';
  
  @Component({
    selector: 'app-line-charts',
    templateUrl: './line-charts.component.html',
    styleUrls: ['./line-charts.component.scss']
  })
  export class LineChartsComponent implements OnInit {
    @Input() openGraph5: Boolean;
    @Output() openGraph5Change: EventEmitter&lt;Boolean&gt; = new EventEmitter&lt;Boolean&gt;();
    @ViewChild('idmyChartSLine') idmyChartSLine: ElementRef;
  
    public donuctx: any;
    public chart: any;
    public plugin: any;
    constructor() {}
  
    ngOnInit() {
  
    }
    ngAfterViewInit(){
      this.donuctx = this.idmyChartSLine.nativeElement.getContext('2d')
      this.chart = new Chart(
        this.donuctx,
        {
            type: 'line',
            data: {
              labels: [2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
              datasets: [{ 
                  data: [86,114,106,106,107,111,133,221,783,200],
                  label: "Africa",
                  borderColor: "#3e95cd",
                  fill: false
                }, { 
                  data: [282,350,411,502,635,809,947,1402,1700,900],
                  label: "Asia",
                  borderColor: "#8e5ea2",
                  fill: false
                }, { 
                  data: [168,170,178,190,203,276,408,547,675,734],
                  label: "Europe",
                  borderColor: "#3cba9f",
                  fill: false
                }, { 
                  data: [40,20,10,16,24,38,74,167,508,784],
                  label: "Latin America",
                  borderColor: "#e8c3b9",
                  fill: false
                }, { 
                  data: [6,3,2,2,7,26,82,172,312,433],
                  label: "North America",
                  borderColor: "#c45850",
                  fill: false
                }
              ]
            },
            options: {
              title: {
                display: true,
                text: 'Line Bar Bar'
              }
            }            
        }
      );
    }
    public change(): void{
      this.openGraph5Change.emit(false)
    }
  }
  </code></pre>
  
  <blockquote>
    <p>component.html</p>
  </blockquote>
  
  <pre><code>&lt;div class="ChartsLine" *ngIf="openGraph5"&gt;
      &lt;div class="canvasContainer"&gt;
              &lt;canvas #idmyChartSLine&gt;
  
              &lt;/canvas&gt;
          &lt;/div&gt;
          &lt;div class="controlPanel"&gt;
  
          &lt;/div&gt;
      &lt;button class="btnFechar" (click)="change()"&gt;
              &lt;img class="btnIcon" src="/assets/close.svg" alt="btn"&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Component father</p>
  </blockquote>
  
  <pre><code>  &lt;button value='graph5' *ngIf="!openGraph5" (click)="changeBtn($event)"&gt;Graphs5&lt;/button&gt;  
    &lt;app-line-charts [openGraph5]="openGraph5" (openGraph5Change)="receiveChangeOpenGraph5($event)"&gt;&lt;/app-line-charts&gt; 
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/0757j9jkv" rel="nofollow noreferrer">Code Sanbox mvp</a></p>