Event Listener for Ag-grid cell in Angular

Question

I am using Ag-grid in Angular 9 as per documentation .

So it is a very basic grid populated with some car model and car price.

The parent component where this code is written is app component . Now i wanted to edit details of any car ( example: price ) in another component ( edit-car-details ).

The problem is when i am rendering the cell of ag-grid by adding a click event listener to it, their is a variable ( editClicked ) defined in App component which i am unable to access in the listener.

Summary of the question : Is there a way to send data to child component from the event listener of a particular cell in parent component's grid?

app.component.ts

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 = '<a style="font-weight:bold;">'+params.data.price+' <i class="fa fa-pencil" aria-hidden="true"></i></a>';
    createDiv.addEventListener('click', function(e){
      console.log('Inside listener');
      this.editClicked = true;                //<============ 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;
  }

}

app.component.html

<div style="margin-left: 2em;">
  Current time is ::
  <br>
  <span style="font-weight: bold;font-size: 2em;">{{timeIndia}}</span>
  <ag-grid-angular
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs">
  </ag-grid-angular>

  <app-edit-car-details *ngIf="editClicked"></app-edit-car-details>

</div>

edit-car-details.component.ts

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');
  }

}

Answer 1

You have to bind the current context using arrow function :

    createDiv.addEventListener('click', () => {
          console.log('Inside listener');
          this.editClicked = true;                //<============ use arrow function
                                                  
        });

Another approach to bind the current context and call a function

 createDiv.addEventListener('click',this.ClickElement.bind(this));

  ClickElement(){
      console.log('Inside listener');
      this.editClicked = true;  
  }

Ref

Answer 2

{ field: 'price' , cellRenderer: this.editCar.bind(this)}

This works. Got idea from @yazan. It has got to do with binding the current context.