Angular Data GridChild to Parent Communication

There are a variety of ways to manage component communication in Angular (shared service, local variables etc), but you often need a simple way to let a "parent" component know that something has happened on a "child" component. In this case the simplest route is to use the Grid's context feature to hold a reference to the parent, which the child can then access.

//...other imports
import {Component} from '@angular/core';
import {ICellRendererAngularComp} from 'ag-grid-angular';
import {CubeComponent} from './cube.component';

@Component({
  selector: 'app-root',
  template: `
      <ag-grid-angular [context]="context" ...other properties> </ag-grid-angular>`
})
export class AppComponent {
  constructor() {
      this.context = {
          componentParent: this
      }
  }

  parentMethod() {
      // do something
  }
  //...other properties & methods
}

@Component({
  selector: 'cell-renderer',
  template: `
      ...component template...`
})
export class CellRendererComponent implements ICellRendererAngularComp {
  params: any;
  componentParent: any;

  agInit(params) {
      this.params = params;
      this.componentParent = this.params.context.componentParent;
      // the grid component can now be accessed - for example: this.componentParent.parentMethod()
  }

  //...other properties & methods
}

Note that although we've used componentParent as the property name here it can be anything - the main point is that you can use the context mechanism to share information between the components. A working example of this can be found in the Cell Renderer docs.