Angular2 - Ag Grid - Get Parent Instance in Cell Renderer Component

Question

I am using Ag Grid for displaying a list of items in my Project. I have implemented Ag Grid with colDef for grid as like below

custom.component.ts

CustomComponent

//colum definition array

[
             {
                headerName: "Actions", 
                field: "action", 
                width: 100,
                cellRendererFramework: ActionRendererComponent,
            },
]

ActionRendererComponent

import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-ng2/main';

@Component({
    selector: 'action-cell',
    template: `
    <a href="javascript:" *ngIf="showEditLink" (click)="edit()">&nbsp;&nbsp;Edit</a>
    <a href="javascript:" *ngIf="showSaveLink" (click)="save()">&nbsp;&nbsp;Save</a>
    <a href="javascript:" *ngIf="showCancelLink" (click)="cancel()">Cancel</a>
    `
})

export class ActionRendererComponent implements AgRendererComponent {
 public edit(){
  ..some logic here
 }
 public save(){
  ..some logic here
 }
 public cancel(){
  ..some logic here
 }
}

Now the issue is i cannot get access to parent instance CustomComponent in any of the functions in ActionRenderer like save(), edit(), cancel(). How can i pass parent instance into ActionRenderer component?

Answer 1

In your parent component while initializing the grid make sure you add following code in its constructor:

import {GridOptions} from "ag-grid";
constructor(){ 
    this.gridOptions = <GridOptions>{
        context: {
            componentParent: this
        }
    };
}

In your template make sure you include gridOptions

<ag-grid-angular #agGrid [gridOptions]="gridOptions">

Make sure you follow steps above. In your cell renderer component, try logging the params. You should be able to get this.params.context.componentParent.

For further reference: Ag-grid parent-child