title: How to call a typescript arrow function and a javascript function in the same event
body: <p>I want to call both a javascript function and a typescript function from the same event. It is a onClick event in a chart. I am relatively new to typescript and angular, so i dont know if what i am doing is even possible.</p>
  
  <p>The problem is: I need to call a javascript function for getting a activated bar in the chart, and the typescript function to open a dialog in the angular component.</p>
  
  <pre class="lang-js prettyprint-override"><code>    onClick: function(evt){
  
        console.log(this);//&lt;-- returns chart
  
        bar: () =&gt; {console.log(this)}; //&lt;-- here I try to get this as component
        bar(); // &lt;--doesnt work
  
        //console.log(document.getElementById('myChart'));
    }
  </code></pre>
  
  <p>Maybe bette if i show the whole thing.</p>
  
  <pre class="lang-js prettyprint-override"><code>  public barChartOptions = {
      scaleShowVerticalLines: false,
      responsive: true,
      events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
      onHover: console.log('onHover'),
  
      onClick: function(evt){
        //console.log(evt); Mouse Event
        console.log(this);
        const getFirst = array =&gt; console.log(this);
        console.log(getFirst);
        //bar: () =&gt; {console.log(this)};
        //bar();
        //console.log(document.getElementById('myChart'));
    },
      /*
      onClick : (evt, datasets) =&gt; {
        //let self = this;
        //console.log(self);
        if(datasets.length &gt; 0){
          this.openDialog();
          console.log(this);
          console.log(this.barChart);
        }
      },*/
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      },
      legend: {
        display: true,
        position: 'right'
      },
      tooltips: {
        enabled: true,
        mode: 'point'
      }
    };
  </code></pre>
  
  <p>this is my html template:</p>
  
  <pre class="lang-html prettyprint-override"><code>
    my-bar-dialog works!
    &lt;div&gt;
      &lt;div style="display: block"&gt;
        &lt;canvas baseChart
                id="myChart"
                [datasets]="barChartData"
                [labels]="barChartLabels"
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType"&gt;
        &lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;button mat-raised-button (click)="openDialog()"&gt;Pick one&lt;/button&gt;
    &lt;button (click)="openDialog()"&gt;Pick one&lt;/button&gt;
  </code></pre>
  
  <p>Now, the thing is i have two different "this":
  1)</p>
  
  <pre class="lang-js prettyprint-override"><code>    onClick: function(evt){
        let that = this;
        let bar=()=&gt; {console.log(that.this)};
        bar();
  
    },
  </code></pre>
  
  <p>2)</p>
  
  <pre class="lang-js prettyprint-override"><code>    onClick : (evt, datasets) =&gt; {
        if(datasets.length &gt; 0){
          console.log(this);
        }
      },
  </code></pre>
  
  <p>1 returns a char, 2 returns the component.
  But i need both of them in the same Event/function as i need to call chartjs api functions and i need to call a function from my component.</p>
  
  <p>And here my component</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Inject } from '@angular/core';
  import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
  import { BarChartService } from '../bar-chart.service';
  import { barChartClass } from '../barChartClass';
  
  declare var foo: Function;
  
  @Component({
    selector: 'app-my-bar-dialog',
    templateUrl: './my-bar-dialog.component.html',
    styleUrls: ['./my-bar-dialog.component.css'],
  })
  export class MyBarDialogComponent implements OnInit {
  
    client: string;
    tenant: string;
  
    constructor(public dialog: MatDialog, private barChartService: BarChartService) {
      foo();
    }
    //First BarChart
    barChart: barChartClass;
    public barChartLabels: any;
    public barChartType: any;
    public barChartLegend: any;
    public barChartData: any;
  
    getBarChart(): void {
      this.barChartService.getMockBarChart().subscribe(
        barChart =&gt; this.barChart = barChart
      );
      this.barChartData = this.barChart.barChartData;
      this.barChartLabels = this.barChart.barChartLabels;
      this.barChartType = this.barChart.barChartType;
      this.barChartLegend = this.barChart.barChartLegend;
    }
  
    public barChartOptions = {
      scaleShowVerticalLines: false,
      responsive: true,
      events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
      onHover: console.log('onHover'),
  
  
      onClick: function(evt){
        //console.log(evt); Mouse Event
        //console.log(this);
        let that = this;
        //bar: () =&gt; {console.log(this)};
        let bar=()=&gt; {console.log(that.this)};
        bar();
        //bar();
        //console.log(document.getElementById('myChart'));
    },
      /*
      onClick : (evt, datasets) =&gt; {
        //let self = this;
        //console.log(self);
        if(datasets.length &gt; 0){
          this.openDialog();
          console.log(this);
          console.log(this.barChart);
        }
      },*/
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      },
      legend: {
        display: true,
        position: 'right'
      },
      tooltips: {
        enabled: true,
        mode: 'point'
      }
    };
  
    openDialog(): void {
      const dialogRef = this.dialog.open(DialogData, {
        width: '250px',
        data: {client: this.client, tenant: this.tenant}
      });
  
      dialogRef.afterClosed().subscribe(result =&gt; {
        console.log('The dialog was closed');
        this.client = result;
      });
    }
    ngOnInit() {
      this.getBarChart();
    }
  }
  
  @Component({
    selector: 'dialog-data',
    templateUrl: 'dialog-data.html',
    styleUrls: ['dialog-data.css']
  })
  export class DialogData {
  
    constructor(
      public dialogRef: MatDialogRef&lt;DialogData&gt;,
      @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  
  }
  
  </code></pre>