Pass data witn @input decorator using ag-Grid

Question

I'm trying to pass data from my ag-Grid to a form in a new component by clicking on the row. I could get the data from the row by clicking on the cell via onCellClicked and now i don't know how to get it in my form component and display it. I thought of using the @input decorator but i'm not sure how. Here is my 2 interfaces : here is my code :

ag-Grid.ts :

import { Component, OnInit } 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 * as moment from 'moment';
import { RouterLinkRendererComponent } from '../router-link-renderer/router-link-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: 'Deal',
      field:'DEALID',
      cellRendererFramework: RouterLinkRendererComponent,
      cellRendererParams: {
        inRouterLink: '/Repo'
      },
      width:300,
      resizable:true,
      onCellClicked: this.makeCellClicked.bind(this),
      filter: 'agNumberColumnFilter',
},
       {
        headerName:'Block',
        field:'BLOCKID',
        width:200,
        resizable:true,
        filter: 'agNumberColumnFilter',
        columnGroupShow:'open',
      },
      ],
    },
   
];

rowData : any; 
constructor(private service:DealsService) {}

onGridReady(params) {
  this.gridApi = params.api; 
}

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

  }
makeCellClicked(event) {
    console.log(event.data);
}

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

form.ts :

import { Component, OnInit , Input} from '@angular/core';
import {NgForm} from '@angular/forms';
import { DecimalPipe } from '@angular/common';
import { Repo } from '../models/repo-models';
import { DealsService } from '../services/deals.service';


@Component({
selector: 'app-repo',
templateUrl: './repo.component.html',
styleUrls: ['./repo.component.scss']
})
export class RepoComponent implements OnInit {
@Input() list : any;

constructor(public service: DealsService) {}

ngOnInit(): void {
}

}

ag-Grid.html :

<ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
style="width: 1350px; height: 630px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
(selectedRows) = "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>

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 really appreciate your help guys. thank you!

In which relation is `form.ts` and `ag-grid.ts`? Are they sibilings? You could use parent child relationship to hand over data as input or you could use `service`... — smithnblack, Jun 21 '20 at 20:48
Have a look over here https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/ — smithnblack, Jun 21 '20 at 20:55
Can you elaborate how your form component is rendered? As part of the same page where your ag-grid is or as part of the some other url which gets rendered when the user clicks the cell? — user2216584, Jun 21 '20 at 21:17
As per the updated post looks like you must go through the link shared by @smithnblack . — user2216584, Jun 21 '20 at 21:38
What's the relationship between the 2 components? Do they have a common parent? Without details of their relationship it is difficult to help. — Berchmans, Jun 21 '20 at 21:44
@Berchmans They are Unrelated components. I need when i click on the id cell it passes the data to the other interface of that cell. — Abaoub, Jun 21 '20 at 21:48
Ok. You have to use a service then. Create a service and inject it in you Grid component, when U click your id cell store data in the service. In the form component inject the same service, When you go to the Form component, read stored data and display it in your form. — Berchmans, Jun 21 '20 at 21:52
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) — Pratik Bhat, Jun 23 '20 at 02:41

Pass data witn @input decorator using ag-Grid

0 Answers0