title: Event Listener for Ag-grid cell in Angular
body: <p>I am using <code>Ag-grid</code> in <code>Angular 9</code> as per <a href="https://www.ag-grid.com/angular-grid/#add-ag-grid-to-your-project" rel="nofollow noreferrer">documentation</a>.</p>
  <p>So it is a very basic grid populated with some car model and car price.</p>
  <p>The parent component where this code is written is <strong><code>app component</code></strong>. Now i wanted to edit details of any car ( example: price ) in another component ( <strong><code>edit-car-details</code></strong> ).</p>
  <p>The problem is when i am <em>rendering the cell of ag-grid by adding a click event listener</em> to it, their is a variable ( <code>editClicked</code> ) defined in <code>App component</code> which i am unable to <em>access</em> in the listener.</p>
  <p><strong><code>Summary of the question</code></strong> : <strong>Is there a way to send data to child component from the event listener of a particular cell in parent component's grid?</strong></p>
  <p><code>app.component.ts</code></p>
  <pre><code>import { Component, EmbeddedViewRef } from '@angular/core';
  import * as moment from 'moment-timezone';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
    title = 'Angular-latest-version';
  
    columnDefs = [
        { field: 'make' },
        { field: 'model' },
        { field: 'price' , cellRenderer: this.editCar}
    ];
  
    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];
  
    editClicked : boolean = false;
    timeIndia;
  
    constructor(){
      this.timeIndia = moment.tz(moment(),'Asia/Kolkata').format('YYYY-MM-DD HH:mm:ss').valueOf();
    }
  
    editCar(params){
      var createDiv = document.createElement('div');
      createDiv.innerHTML = '&lt;a style=&quot;font-weight:bold;&quot;&gt;'+params.data.price+' &lt;i class=&quot;fa fa-pencil&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;';
      createDiv.addEventListener('click', function(e){
        console.log('Inside listener');
        this.editClicked = true;                //&lt;============ problem in this line  : ERROR in 
                                                // src/app/app.component.ts:37:12 - error TS2339: Property 
                                                //'editClicked' does not exist on type 'HTMLDivElement'
      });
  
      return createDiv;
    }
  
  }
  
  </code></pre>
  <p><code>app.component.html</code></p>
  <pre><code>&lt;div style=&quot;margin-left: 2em;&quot;&gt;
    Current time is ::
    &lt;br&gt;
    &lt;span style=&quot;font-weight: bold;font-size: 2em;&quot;&gt;{{timeIndia}}&lt;/span&gt;
    &lt;ag-grid-angular
      style=&quot;width: 500px; height: 500px;&quot;
      class=&quot;ag-theme-alpine&quot;
      [rowData]=&quot;rowData&quot;
      [columnDefs]=&quot;columnDefs&quot;&gt;
    &lt;/ag-grid-angular&gt;
  
    &lt;app-edit-car-details *ngIf=&quot;editClicked&quot;&gt;&lt;/app-edit-car-details&gt;
  
  &lt;/div&gt;
  
  </code></pre>
  <p><code>edit-car-details.component.ts</code></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-edit-car-details',
    templateUrl: './edit-car-details.component.html',
    styleUrls: ['./edit-car-details.component.css']
  })
  export class EditCarDetailsComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
      console.log('inside edit component');
    }
  
  }
  
  </code></pre>