not a function error in Angular (ag-grid)

Issue

I'm trying to define a button in ag-grid to delete the selected row from the database.

But when the button is clicked I'm getting the error: ERROR TypeError: this.deleteContact is not a function.

What should I do to resolve the issue?

import { ButtonrendererComponent } from '../buttonrenderer/buttonrenderer.component';

export class DashboardComponent implements OnInit {

  frameworkComponents = {
    buttonRenderer: ButtonrendererComponent,
    }

  constructor(private api: ApiService) {}

  ngOnInit(): void {
    this.getContactDetails(); 
  }

  columnDefs=[
    {headerName: 'ID', field:'id', width: 200},
    {
      headerName: 'Delete',
      cellRendererFramework: ButtonrendererComponent,
      cellRendererParams: {
      label: 'Delete',
      onClick: this.onBtnClick1
      }
    },
  ]

  deleteContact(id){
    this.api.deleteContact(id)
    .subscribe(res =>{
      alert("Contact deleted");
      this.getContactDetails();
    });
  }

  onBtnClick1(e) {
    alert(e.data.id)
    this.deleteContact(e.data.id)
  }
}

Solution

This is because this for ButtonrendererComponent is different, Please try below.

cellRendererParams: {
      label: 'Delete',
      onClick: () => this.onBtnClick1()
}

Answered By - JsNgian