title: How to open Modal Dialog from ag-grid cell click Angular 6
body: <p>Wants to open a mat-dialog on click of Detail Icon. But the issue is <code>this</code> is not referring to class. Its referring to the current grid.</p>
  
  <pre class="lang-js prettyprint-override"><code>    constructor(private dialog: MatDialog) {}
  
      ngOnInit() {
       this.gridOptions = &lt;GridOptions&gt;{
       rowSelection: 'multiple',
       floatingFilter: true
      };
  
      this.gridOptions.columnDefs = [
        { 
          headerName: 'Detail', field: '', filter: false, width: 80,
          sortable: false,
          onCellClicked: this.openModal,
          cellRenderer: (data) =&gt; {
            return `&lt;mat-icon class="mat-icon material-icons" style="cursor:pointer;" aria-hidden="true"&gt;
            keyboard_capslock&lt;/mat-icon&gt;`;
          }
       },
       { headerName: 'Field Name', field: 'fieldName'}
      ];    
  
      openModal(row): void {
         const detailRef = this.dialog.open(DetailComponent, {
           height: '100vw',
           width: '80vh',
           direction: 'ltr',
           data: {
            record: row.data
           }
       });
  </code></pre>
  
  <pre><code>Error: Unable to get property 'open' of undefined or null reference
  </code></pre>
  
  <p>Here this is referring to Grid and not to the class.</p>
  
  <p>How can I refer to the class method to open the dialog?</p>