Framework:angularvue

Child 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 CubeComponent from './CubeComponent';

@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 {
  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.