Reputation: 71
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!
Upvotes: 1
Views: 1049