title: Tabulator cell click: How to call a function in angular on cell click and use component elements
body: <p>I am trying to use Tabulator for tables in angular 7. I am trying to call a function on cell click such that the function should open a MatDialog box and display row information. However, the problem is that when I try to access any of the Component variables (dialog: MatDialog) inside the called function, it is undefined. On debugging I found that the function is called inside the Tabulator and not in the angular component. Is there a way to call a function in the Angular and access component variables inside the function?</p>
  
  <pre><code>
  export class ExampleTableComponent implements OnInit {
  exampleTable: Tabulator;
  
   constructor(private dialog: MatDialog) { }
  
  ngOnInit() {
  
      this.exampleTable = new Tabulator("#ex-table-div",{
        height : 300,
        data: this.example_data,
        layout: "fitColumns",
        columns: [
          { formatter:"rownum", align:"center", width:40},
          { formatter: this.printIcon, width:40, align:"center", 
           cellClick: this.openDialog
          },
          .......
        ],
        ......
      });
  }
  
  
  openDialog(e, cell){
  
      const dialogConfig = new MatDialogConfig();
  
            dialogConfig.disableClose = true;
            dialogConfig.autoFocus = true;
  
            this.dialog.open(DetailsComponent, {      
              width: '300px',
            });
  
       ..........
    }
  ......
  }
  </code></pre>