Pass data with buttonRenderer in Ag-Grid Angular

Question

im trying to pass data between 2 unrelated components by clicking on the cell in ag-Grid and the data will be passed to my form component. I used the buttonRenderer function to retrieve the data of the row from the ag-Grid but i don't know how to pass it now to my second component. here is my 2 interfaces :

here is my code too : Ag-Grid.ts

 import { Component, OnInit,Output, EventEmitter,Input  } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Grid, GridApi } from 'ag-grid-community';
    import { AgGridAngular } from 'ag-grid-angular';
    import { DealsService } from '../services/deals.service';
    import "ag-grid-community/dist/styles/ag-grid.css";
    import "ag-grid-community/dist/styles/ag-theme-balham.css";
    import { RouterLinkRendererComponent } from '../router-link-renderer/router-link-renderer.component';
    import {RouterModule, Routes, Router} from '@angular/router';
    import { ButtonRendererComponent } from '../renderer/button-renderer/button-renderer.component';
    
    @Component({
      selector: 'app-deals',
      templateUrl: './deals.component.html',
      styleUrls: ['./deals.component.scss']
    })
    export class DealsComponent implements OnInit {
      
      private gridApi;
      gridOptions = {
        rowHeight :90,
        headerHeight:60,
        
        defaultColDef: {
          sortable: true
      },
      }
      columnDefs = [
        {
          headerName: 'Button Col 1',
          cellRenderer: 'buttonRenderer',
          cellRendererParams: {
            onClick: this.onBtnClick1.bind(this),
            label: 'Deal details',
            }
        },
rowData : any;
frameworkComponents: any;
rowDataClicked1 = {};
rowDataClicked2 = {};
constructor(private service:DealsService) {
  this.frameworkComponents = {
    buttonRenderer : ButtonRendererComponent,
  }
}
onGridReady(params) {
  this.gridApi = params.api; 
}

getDropDownlist(){
  this.service.getDealsList().subscribe(data => this.rowData = data);  
  }
  
onBtnClick1(e) {
  this.rowDataClicked1 = e.rowData;

}
  
ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
}); 
}

Ag-Grid.html :

 <h4>Row data from button 1: </h4>
 <pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style="    min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"

(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"

 >
</ag-grid-angular>

ButtonRendererComponent.ts :

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {

  params;
  label: string;

  agInit(params): void {
    this.params = params;
    this.label = this.params.label || null;
  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(params);

    }
  }
}

and finally form.ts :

import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-repo',
templateUrl: './repo.component.html',
styleUrls: ['./repo.component.scss']
})
export class RepoComponent implements OnInit {
constructor() {}
ngOnInit(): void {
}
}

form.html :

<div style="display:flex;" class="panel panel-default">
    <div style="width: 500px; height: 500px;"></div>
 <form   autocomplete="off" >
    <div class="form-group">
        <label>Folder</label>
        <input required type="text" id="folder"  placeholder="Enter a 
  folder" name="Folder" style="width: 400px;">
      </div>
    </form>

I'm blocked and I really appreciate your help guys. thank you!

Does this answer your question? [How to pass data between two components in Angular 2](https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2) Note that @ihorbond gave you this same suggestion when you asked the identical question 2 days ago here: https://stackoverflow.com/questions/62487263/pass-data-between-2-components-in-angular — GreyBeardedGeek, Jun 22 '20 at 20:59

score 0 · Answer 1 · answered Aug 03 '20 at 21:46

app-deals component:

add app-repo to html and pass the value from ButtonRenderer to the 'data' input:

HTML:

<app-repo [data]="rowDataClicked1"></app-repo>

app-repo component:

add an Input to get the data from ButtonRenderer.

create your form using angular Reactive Forms.

patch data recieved from ButtonRenderer to the form.

@Input() data: any;

form: FormGroup;

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        folder: '',
        type: ''
    });
}

ngOnChanges(changes) {
    if (changes.data) thos.form.patchValue(this.data);
}

HTML:

<form [formGroup]="formData">
    <div>
        <input placeholder="Folder" formControlName="folder">
    </div>
    <div>
        <input placeholder="Type" formControlName="type">
    </div>
</form>

Pass data with buttonRenderer in Ag-Grid Angular

1 Answers1