Chart Component BECOMES undefined

I browsed through few threads before posting, but non seemed to have the same problem as me.

My application looks like in the attached file, but basically a RangeNavigator and a bar Chart.
I hold them in 2 different components in my project (I believe that the error is connected to this), they are inside the same model, but just 2 different components.

ChartComponent
.html looks like this:

<ejs-chart #sopChart id='chart' style='display:block;' [chartArea]='chartArea' align='center' [primaryXAxis]='primaryXAxis'
           [primaryYAxis]='primaryYAxis' [title]='title'>
  <e-series-collection>
    <e-series type='Column' xName='abbrevDate' yName='value' name='Quantity' width=2 [marker]='marker'> </e-series>
  </e-series-collection>
</ejs-chart>

 in .ts I handle it like this

  @ViewChild('sopChart') _chart: ChartComponent;

  ngOnInit() {
    this.loadData(true);
  }


  filterData(args: IChangedEventArgs){
    if(this.notFirstRun){
        this.dataSource = this.dataSource.filter((data: { [key: string]: Object }): Boolean => {
        return (data.date >= new Date(+args.start) && data.date <= new Date(+args.end));
      });
      this.loadData(false);
    }
    this.notFirstRun=true;
  }

  loadData(load: boolean) {
    if(load){
      console.log('LOAD DATA');
      console.log(this._chart);
      this.reportingService.getMainSalesReport().subscribe(
          data => {
            this.dataSource = data;
            this._chart.series[0].dataSource = this.dataSource;
            this._chart.refresh();
          });
    } else{
      console.log('RELOAD DATA');
      console.log(this._chart);
      this._chart.series[0].dataSource = this.dataSource;
      this._chart.refresh();
    }
  }

So in short on init I call LOAD data part of the loadData() method which works like a charm and it consoles a chart object as expected.

Problem is when I onChange of the RangeNavigator I call the filterData() it says "cannot read property 'series' of undefined" and this is how I do it in RangeComponent:

ngOnInit() {
  this.sopComp = new ChartComponent();
}

public changed(args: IChangedEventArgs): void {
  this.sopComp.filterData(args);
}

What I believe might be an issue, but have no idea how to fix is that I create a new object of a ChartComponent class and that class for some reason doesn't have a scope on that chart Id which I am trying to change. 
I tried to making ChartComponent into Injectable() in order to avoid object creation, but with no success.

If anyone could provide me with some kind of input, approach or anything in that nature that would be greatly appreciated.
Cheers!

Class BarChartComponent() implements AfterViewInit{         //….         ngAfterViewInit() {               this.loadData(true);         }    }

Class BarChartComponent() implements AfterViewInit{         //….         ngOnInit() {               this.xName = ‘abbrevDate’               this.yName = ‘value’               this.loadData(true);         }    }