ag-grid_demo

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <app-grid></app-grid>
</body>

</html>

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^7.2.0",
        "@angular/compiler": "^7.2.0",
        "@angular/core": "^7.2.0",
        "@angular/platform-browser": "^7.2.0",
        "@angular/platform-browser-dynamic": "^7.2.0",
        "core-js": "^2.5.5",
        "rxjs": "^6.1.0",
        "zone.js": "~0.8.26",
        "ag-grid-angular": "^20.2.0",
        "ag-grid-community": "^20.2.0",
        "ag-grid": "^18.1.2",
        "@angular/material": "^7.3.7",
        "@angular/forms": "^7.2.13"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AgGridModule } from 'ag-grid-angular/main';

import { GridComponent } from './grid.component';
import { CellEditorComponent } from './cell-editor.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AgGridModule.withComponents([CellEditorComponent]),
  ],
  declarations: [GridComponent, CellEditorComponent],
  bootstrap: [GridComponent],
  providers: [ ]
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

@import '~ag-grid-community/dist/styles/ag-grid.css';
@import '~ag-grid-community/dist/styles/ag-theme-balham.css';

import { Component, OnInit } from '@angular/core';
import { GridOptions, ColDef } from 'ag-grid-community';
import { CellEditorComponent } from './cell-editor.component';

@Component({
  selector: 'app-grid',
  template: `<div style="width: 200px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;"  class="ag-theme-balham" [gridOptions]="gridOptions">
  </ag-grid-angular>
</div>`,
})
export class GridComponent implements OnInit {
  ngOnInit() {}

  public gridOptions: GridOptions;

  public testCol: ColDef = {
    headerName: 'testCol',
    field: 'testCol',
    cellEditorFramework: CellEditorComponent,
    editable: true,
    width: 100,
  };

  constructor() {
    this.gridOptions = <GridOptions>{};
    this.gridOptions.columnDefs = [this.testCol];
    this.gridOptions.rowData = [
      { testCol: 10 },
      { testCol: 20 },
      { testCol: 30 },
    ];
  }
}

import { Component, OnInit } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-cell-editor',
  template: `<div>
  <input type="text" [(ngModel)]="model" (keyup.enter)="HandleChange()" value="model">
</div>`,
})
export class CellEditorComponent implements ICellEditorAngularComp {
  public params: any;
  public model: string;

  getValue() {
    return this.model;
  }
  isCancelBeforeStart?(): boolean {
    return false;
  }

  isCancelAfterEnd?(): boolean {
    return true;
  }

  agInit(params: any): void {
    this.params = params;
    this.model = params.data.testCol;
  }

  HandleChange() {
    console.log('Model changed');
  }

  constructor() {}

  ngOnInit() {}
}