add a chart in my project on child component in angular but it doesn't work

Question

I want to add a chart in my project on child component but it doesn't work,I have some components: menu,header,section , I want to click on an option in menu namely dashboard and charts show on section but it doesn't work. it works in parent components but in child it doesn't work. i add this to app.module.ts import { NgChartsModule } from 'ng2-charts';

app.html

<div class="container-grid">
    
<div class="header-grid"><app-header  ></app-header></div>
<div class="section-grid"><router-outlet>
    <canvas baseChart
          
    [datasets]="labelMFL"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
  
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)"></canvas>
</router-outlet></div>
<div class="footer-grid"><app-footer ></app-footer></div>
<div class="menu-grid"  ><app-menu  >
    
</app-menu>

app.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public SystemName: string = "MF1";
  firstCopy = false;

  // data
  public lineChartData: Array<number> = [ 1,8,49];
 
  public labelMFL: Array<any> = [
      { data: this.lineChartData,
        label: this.SystemName
      }
  ];
  // labels
  public lineChartLabels: Array<any> = ["2018-01-29 10:00:00", "2018-01-29 10:27:00", "2018-01-29 10:28:00"];
  
  constructor(  ) { }

  public lineChartOptions: any = {
    responsive: true,
    scales : {
      yAxes: [{
        ticks: {
          max : 60,
          min : 0,
        }
      }],
      xAxes: [{
  
 
        }],
    },
      plugins: {
      datalabels: {
        display: true,
        align: 'top',
        anchor: 'end',
        //color: "#2756B3",
        color: "#222",

        font: {
          family: 'FontAwesome',
          size: 14
        },
      
      },
      deferred: false

    },

  };

   _lineChartColors:Array<any> = [{
       backgroundColor: 'red',
        borderColor: 'red',
        pointBackgroundColor: 'red',
        pointBorderColor: 'red',
        pointHoverBackgroundColor: 'red',
        pointHoverBorderColor: 'red' 
      }];



  public ChartType = 'bar';

  public chartClicked(e: any): void {
    console.log(e);
  }
  public chartHovered(e: any): void {
    console.log(e);
  }

  title = 'dashboard';
  flag:boolean=false;
  menuToggle(flag:boolean){
    
      flag=flag;
     }
  }