Cómo pasar parámetros de un Cell Renderer al Componente en AG-Grid Angular

Hoy me tocó trabajar con AG-Grid donde el código usaba un Cell Renderer y requería pasar de regreso el ID que tenía ese Row al hacer clic a un botón y buscando en internet es muy difícil encontrar la información apropiada y por ello preferí hacer este post ahora que pude resolverlo esperando te funcione.

Bueno, vamos manos a la obra… la cosa es bastante fácil, para poder generar un Cell Renderer ocupamos pasar las ColDefs que no explicaré, pero vamos a considerar este código en tu ColDef:

...
{
	field: 'Mi campo',
	headerName: 'Mi Columna',
	cellRenderer: 'Mi Framework Component',
	cellRendererParams: {} // <--nota este parámetro
}
...

Bueno, como se ve en el código anterior tenemos el parámetro cellRendererParams que nos permite pasar parámetros HACIA el CellRenderer pero nosotros queremos recibir datos desde…

Así que vamos a modificar dicho para agregar una función:

...
{
	field: 'Mi campo',
	headerName: 'Mi Columna',
	cellRenderer: 'Mi Framework Component',
	cellRendererParams: {
           miFuncionParaRegresarParametros: (parametros) => {
               this.miFuncionDelComponente(parametros);
           }
        } 
}
...

Como puedes ver, la función requerirá de un método que esté dentro del componente así que simplemente sería generar algo como:

miFuncionDelComponente(parametros) {
   console.log(parametros);
}

Y listo, ya estaríamos listos para recibirlos, ahora vamos al Cell Renderer, dentro por ejemplo supongamos que tenemos en el agInit lo siguiente:

agInit(params) {
   if (params) {
     this.params = params;
   }
}

Y adicionalmente el botón:

<button (click)="ejecutarCodigo()">Boton</button>

Entonces sencillamente haremos la función ejecutarCodigo() de la siguiente forma:

ejecutarCodigo() {
   this.params.miFuncionParaRegresarParametros(this.params.data);
}

Y entonces en el componente deberíamos ver el console.log que implementamos. Notemos antes de terminar que pasamos this.params.data que es donde recibimos los parámetros de datos desde cellRendererParams

Y eso fue todo por este tutorial, ¿fácil, no?. ¡Hasta el próximo tutorial!