<!DOCTYPE html>
<html>
<head>
<title>ag-Grid Using Dynamic Components</title>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- ag-grid CSS -->
<link href="https://unpkg.com/ag-grid/dist/styles/ag-grid.css" rel="stylesheet"/>
<link href="https://unpkg.com/ag-grid/dist/styles/theme-fresh.css" rel="stylesheet"/>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
map: {
'app': 'app',
// angular bundles
'@angular/core': 'npm:@angular/core@2.4.8/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@2.4.8/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@2.4.8/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@2.4.8/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.8/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@2.4.8/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@2.4.8/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs@5.0.0',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.1.1/lib/typescript.js',
// ag libraries
'ag-grid-angular': 'npm:ag-grid-angular',
'ag-grid': 'npm:ag-grid'
},
packages: {
app: {
main: './boot.ts',
defaultExtension: 'ts'
},
'ag-grid': {
main: 'main.js'
}
}
}
);
if (!global.noBootstrap) {
bootstrap();
}
// Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
function bootstrap() {
// Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
System.set(System.normalizeSync('app/boot.ts'), System.newModule({}));
// bootstrap and launch the app (equivalent to standard main.ts)
Promise.all([
System.import('@angular/platform-browser-dynamic'),
System.import('app/app.module')
])
.then(function (imports) {
var platform = imports[0];
var app = imports[1];
platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
})
.catch(function (err) {
console.error(err);
});
}
})(this);
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent { }
<ag-from-component></ag-from-component>
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
// ag-grid
import {AgGridModule} from "ag-grid-angular/main";
// application
import {AppComponent} from "./app.component";
// dynamic component
import {DynamicComponent} from "./dynamic-component-example/dynamic.component";
import {SquareComponent} from "./dynamic-component-example/square.component";
import {ParamsComponent} from "./dynamic-component-example/params.component";
import {CubeComponent} from "./dynamic-component-example/cube.component";
import {CurrencyComponent} from "./dynamic-component-example/currency.component";
import {ChildMessageComponent} from "./dynamic-component-example/child-message.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
AgGridModule.withComponents(
[
SquareComponent,
CubeComponent,
ParamsComponent,
CurrencyComponent,
ChildMessageComponent
])
],
declarations: [
AppComponent,
DynamicComponent,
SquareComponent,
CubeComponent,
ParamsComponent,
CurrencyComponent,
ChildMessageComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
<div style="width: 800px;">
<h1>Using Dynamic Components</h1>
<button (click)="refreshRowData()">Refresh Data</button>
<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions">
</ag-grid-angular>
</div>
import {Component} from '@angular/core';
import {GridOptions} from 'ag-grid/main';
import {SquareComponent} from "./square.component";
import {ParamsComponent} from "./params.component";
import {CubeComponent} from "./cube.component";
import {CurrencyComponent} from "./currency.component";
import {ChildMessageComponent} from "./child-message.component";
@Component({
moduleId: module.id,
selector: 'ag-from-component',
templateUrl: 'dynamic.component.html'
})
export class DynamicComponent {
public gridOptions:GridOptions;
constructor() {
this.gridOptions = <GridOptions>{
context: {
componentParent: this
}
};
this.gridOptions.rowData = this.createRowData();
this.gridOptions.columnDefs = this.createColumnDefs();
}
private onCellValueChanged($event) {
this.gridOptions.api.refreshCells([$event.node],["cube"]);
}
public methodFromParent(cell) {
alert(`"Parent Component Method from ${cell}!`);
}
private createColumnDefs() {
return [
{headerName: "Row", field: "row", width: 100},
{
headerName: "Square",
field: "value",
cellRendererFramework: SquareComponent,
editable:true,
colId: "square",
width: 100
},
{
headerName: "Cube",
field: "value",
cellRendererFramework: CubeComponent,
colId: "cube",
width: 100
},
{
headerName: "Row Params",
field: "row",
cellRendererFramework: ParamsComponent,
colId: "params",
width: 215
},
{
headerName: "Currency (Pipe)",
field: "currency",
cellRendererFramework: CurrencyComponent,
colId: "params",
width: 135
},
{
headerName: "Child/Parent",
field: "value",
cellRendererFramework: ChildMessageComponent,
colId: "params",
width: 120
}
];
}
public refreshRowData() {
let rowData = this.createRowData();
this.gridOptions.api.setRowData(rowData);
}
private createRowData() {
let rowData:any[] = [];
for (var i = 0; i < 15; i++) {
rowData.push({
row: "Row " + i,
value: i,
currency: i + Number(Math.random().toFixed(2))
});
}
return rowData;
}
}
import {Component,OnDestroy} from '@angular/core';
import {ICellRendererAngularComp} from 'ag-grid-angular/main';
@Component({
selector: 'square-cell',
template: `{{valueSquared()}}`
})
export class SquareComponent implements ICellRendererAngularComp, OnDestroy {
private params:any;
agInit(params:any):void {
this.params = params;
}
public valueSquared():number {
return this.params.value * this.params.value;
}
ngOnDestroy() {
console.log(`Destroying SquareComponent`);
}
}
import {Component} from '@angular/core';
import {ICellRendererAngularComp} from 'ag-grid-angular/main';
@Component({
selector: 'cube-cell',
template: `{{valueCubed()}}`
})
export class CubeComponent implements ICellRendererAngularComp {
private params: any;
private cubed: number;
// called on init
agInit(params: any): void {
this.params = params;
this.cubed = this.params.data.value * this.params.data.value * this.params.data.value;
}
// called when the cell is refreshed
refresh(params: any): void {
this.params = params;
this.cubed = this.params.data.value * this.params.data.value * this.params.data.value;
}
public valueCubed(): number {
return this.cubed;
}
}
import {Component, OnDestroy} from '@angular/core';
import {ICellRendererAngularComp} from 'ag-grid-angular/main';
@Component({
selector: 'params-cell',
template: `Field: {{params.colDef.field}}, Value: {{params.value}}`
})
export class ParamsComponent implements ICellRendererAngularComp {
public params: any;
agInit(params: any): void {
this.params = params;
}
}
import {Component} from '@angular/core';
import {ICellRendererAngularComp} from 'ag-grid-angular/main';
@Component({
selector: 'currency-cell',
template: `{{params.value | currency:'EUR'}}`
})
export class CurrencyComponent implements ICellRendererAngularComp {
public params:any;
agInit(params:any):void {
this.params = params;
}
}
import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular/main";
@Component({
selector: 'child-cell',
template: `<span><button style="height: 20px" (click)="invokeParentMethod()">Invoke Parent</button></span>`
})
export class ChildMessageComponent implements ICellRendererAngularComp {
public params: any;
agInit(params: any): void {
this.params = params;
console.log(params.eGridCell)
}
public invokeParentMethod() {
this.params.context.componentParent.methodFromParent(`Row: ${this.params.node.rowIndex}, Col: ${this.params.colDef.headerName}`)
}
}