title: Angular 6 + Chart.js - Display a targeted chart from a different component on condition
body: <p>(if you wish to skip directly to the question, please scroll to the last paragraph).</p>
  
  <p>I have <code>ChartsComponent</code> which is a child of <code>HomeComponent</code>.</p>
  
  <p>In <code>charts.component.ts</code>, I'm using Chart.js to create several charts.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core',
  import { Chart } from 'chart.js'
  
  @Component({
    selector: 'app-charts',
    templateUrl: './charts.component.html',
    styleUrls: ['./charts.component.scss']
  })
  
  export class ChartsComponent implements OnInit {
    pieChart: any;
    doughnut: any;
  
    constructor() {}
  
    ngOnInit() {
      //Pie chart
      this.pieChart = new Chart('pieChartCanvas', {
        type: 'pie',
        ...
      });
  
      //Doughnut chart
      this.Doughnut = new Chart('doughnutChartCanvas', {
        type: 'Doughnut ',
        ...
      });
    }
  }
  </code></pre>
  
  <p>I can call upon those two charts easily in <code>charts.component.html</code> using <code>&lt;canvas id="pieChartCanvas"&gt;&lt;canvas&gt;</code> and <code>&lt;canvas id="doughnutChartCanvas"&gt;&lt;canvas&gt;</code>, then add <code>&lt;app-charts&gt;&lt;/app-charts&gt;</code> into <code>home.component.html</code> and they will display fine. However, what I'm trying to achieve is a bit different.</p>
  
  <blockquote>
    <p>Following part has been edited.</p>
  </blockquote>
  
  <p>A backend will send some data with a property value of "pie" or "doughnut" for exemple (that I would simulate with data.ts or json file). I would like to be able to set a condition (maybe via <code>*ngIf="pieChartCanvas"</code>) that would decide which of the two charts to call upon from <code>charts.component.ts</code>and be able to display it in <code>charts.component.html</code>.</p>
  
  <p>Then <code>home.component.html</code> will just be here to display the component via <code>&lt;app-charts&gt;&lt;/app-charts&gt;</code></p>
  
  <p>Any ideas on how to make it work?</p>