import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GridOptions } from 'ag-grid-community';
@Component({
selector: 'app-root',
template: `
<ag-grid-angular
style="width: 600px; height: 500px;"
class="ag-theme-alpine"
[gridOptions]="gridOptions"
(firstDataRendered)="onFirstDataRendered($event)"
></ag-grid-angular>
`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
gridOptions: GridOptions = {
columnDefs: [
{ headerName: 'Name', field: 'name' },
{ headerName: 'Age', field: 'age' },
{ headerName: 'Country', field: 'country' },
{ headerName: 'Action', field: 'action', cellRenderer: 'actionRenderer' },
],
rowData: [
{ name: 'John Doe', age: 30, country: 'USA', id: 1 },
{ name: 'Jane Doe', age: 25, country: 'Canada', id: 2 },
// Add more rows as needed
],
frameworkComponents: {
actionRenderer: ActionRendererComponent,
},
};
constructor(private httpClient: HttpClient) {}
onFirstDataRendered(params: any) {
params.api.sizeColumnsToFit();
}
}
@Component({
selector: 'app-action-renderer',
template: `
<button (click)="onActionClick()">Download JSON</button>
`,
})
export class ActionRendererComponent {
constructor(private httpClient: HttpClient) {}
agInit(params: any): void {
// You can access row data using params.data
// For example, params.data.id
}
onActionClick() {
const apiUrl = 'your-api-endpoint?id='; // Replace with your actual API endpoint and include necessary parameters
this.httpClient.get(apiUrl).subscribe(
(data: any) => {
this.downloadDataAsJson(data, 'collection.json');
},
(error) => {
console.error('Error:', error);
}
);
}
downloadDataAsJson(data: any, filename: string) {
const jsonBlob = new Blob([JSON.stringify(data)], { type: 'application/json' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(jsonBlob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}