Does not render child after ngif is applied to the mounted component

Question

My problem is different from this answer, 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. Summary, my problem is how to remove and add with ngIF and render the contents of the component.

initiliaze componenet openGraph5 = true;

component.ts

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<Boolean> = new EventEmitter<Boolean>();
  @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)
  }
}

component.html

<div class="ChartsLine" *ngIf="openGraph5">
    <div class="canvasContainer">
            <canvas #idmyChartSLine>

            </canvas>
        </div>
        <div class="controlPanel">

        </div>
    <button class="btnFechar" (click)="change()">
            <img class="btnIcon" src="/assets/close.svg" alt="btn">
    </button>
</div>

Component father

  <button value='graph5' *ngIf="!openGraph5" (click)="changeBtn($event)">Graphs5</button>  
  <app-line-charts [openGraph5]="openGraph5" (openGraph5Change)="receiveChangeOpenGraph5($event)"></app-line-charts>

Code Sanbox mvp

look at the life cycle hooks doc .Very important to understand the life cycle hooks [link](https://angular.io/guide/lifecycle-hooks) — valerian Havaux, Apr 12 '19 at 22:47
The event emiter not the problem I created a mvp in the sanbox code, I added the question, the graph is initialized in the componenet, on the right side there is a close button that triggers an emiter false in openGraph5 and in the app module there is an open button that fire a true action in openGraph5, test the buttons and you'll see the problem I'm describing. — Chance, Apr 13 '19 at 01:09
Or extract your graph init on a OnChanges life cycle hook _A lifecycle hook that is called when any data-bound property of a directive changes._ [link](https://angular.io/api/core/OnChanges) — valerian Havaux, Apr 13 '19 at 11:12

Does not render child after ngif is applied to the mounted component

0 Answers0