<!DOCTYPE html>
<html>
<head>
<title>ag-Grid Using Angular Floating Row 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-floating-row-renderer-component></ag-floating-row-renderer-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";
// floating row
import {FloatingRowComponent} from "./floating-row-example/floating-row-renderer.component";
import {StyledComponent} from "./floating-row-example/styled-renderer.component";
@NgModule({
imports: [
BrowserModule,
FormsModule,
AgGridModule.withComponents(
[
StyledComponent
])
],
declarations: [
AppComponent,
FloatingRowComponent,
StyledComponent
],
bootstrap: [AppComponent]
})
export class AppModule {
}
<div style="width: 800px;">
<h1>Floating Row Renderer Example</h1>
<button (click)="resizeWind()">click me</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 {ICellRendererAngularComp} from 'ag-grid-angular/main';
@Component({
selector: 'floating-cell',
template: `<span [ngStyle]="style">{{params.value}}</span>`
})
export class StyledComponent implements ICellRendererAngularComp {
public params: any;
public style: string;
agInit(params: any): void {
this.params = params;
this.style = this.params.style;
}
}
import {Component} from "@angular/core";
import {GridOptions} from "ag-grid/main";
import {StyledComponent} from "./styled-renderer.component";
@Component({
moduleId: module.id,
selector: 'ag-floating-row-renderer-component',
templateUrl: 'floating-row-renderer.component.html'
})
export class FloatingRowComponent {
public gridOptions: GridOptions;
constructor() {
this.gridOptions = <GridOptions>{};
this.gridOptions.rowData = this.createRowData();
this.gridOptions.columnDefs = this.createColumnDefs();
this.gridOptions.floatingTopRowData = [
{row: "Top Row", number: "Top Number"}
];
this.gridOptions.floatingBottomRowData = [
{row: "Bottom Row", number: "Bottom Number"}
];
}
private createColumnDefs() {
return [
{
headerName: "Row",
field: "row",
width: 400,
floatingCellRendererFramework: StyledComponent,
floatingCellRendererParams: {
style: {'font-weight': 'bold'}
}
},
{
headerName: "Number",
field: "number",
width: 399,
floatingCellRendererFramework: StyledComponent,
floatingCellRendererParams: {
style: {'font-style': 'italic'}
}
},
];
}
private resizeWind(){
this.gridOptions.api.forEachNode(rowNode => {
if (rowNode.data) {
rowNode.setRowHeight(100);
}
});
this.gridOptions.api.onRowHeightChanged();
}
private createRowData() {
let rowData: any[] = [];
for (var i = 0; i < 15; i++) {
rowData.push({
row: "Row " + i,
number: Math.round(Math.random() * 100)
});
}
return rowData;
}
}