<!DOCTYPE html>
<html>
<head>
<base href="." />
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="font-awesome@4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script>
var systemJsMap = {"ag-grid":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid\/main":"https:\/\/unpkg.com\/ag-grid@17.0.0\/dist\/ag-grid.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@17.0.0\/","ag-grid-react":"npm:ag-grid-react@17.0.0\/","ag-grid-angular":"npm:ag-grid-angular@17.0.0\/","ag-grid-vue":"npm:ag-grid-vue@17.0.0\/"};
</script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map:Object.assign({
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
systemJsMap),
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'ag-grid-angular': {
main: './main.js',
defaultExtension: 'js'
},
'ag-grid-enterprise': {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular';
import { App } from './app.component.ts';
import { PriceCellEditorComponent } from './price.cellEditor.component.ts';
import { DynamicTabsDirective } from './dynamic-tabs.directive.ts';
import { TabComponent } from './tab.component.ts';
import { TabsComponent } from './tabs.component.ts';
import { GridWrapperComponent } from './grid-wrapper.component.ts';
import { PricePage } from './price.page.ts';
@NgModule({
imports: [ BrowserModule, FormsModule, AgGridModule.withComponents([PriceCellEditorComponent]) ],
declarations: [ App, PriceCellEditorComponent, DynamicTabsDirective, TabComponent, TabsComponent, GridWrapperComponent, PricePage ],
entryComponents: [
TabComponent
]
bootstrap: [ App ]
})
export class AppModule {}
import { Component, ViewEncapsulation, ViewChild, TemplateRef } from '@angular/core';
import { GridOptions, GridApi, ColumnApi } from 'ag-grid/main';
import 'ag-grid-enterprise';
import { TabsComponent } from './tabs.component.ts';
import { items1 } from '../data/items1.ts';
import { items2 } from '../data/items2.ts';
import { items3 } from '../data/items3.ts';
import { items4 } from '../data/items4.ts';
@Component({
selector: 'my-app',
templateUrl: './src/app.component.html',
styleUrls: ['./src/app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class App {
@ViewChild(TabsComponent) tabsComponent;
@ViewChild('tab') tabTemplate: TemplateRef<any>;
openTab(tabId: number, selected: any) {
let template = this.tabTemplate;
let id = '';
let data = {
items:[],
id: 0
};
let title = `Tab ${tabId}`;
let description = '';
let height = '';
switch (tabId) {
case 1:
id = 1;
data = {
items: items1,
id: 1
};
break;
case 2:
id = 2;
data = {
items: items2,
id: 2
};
break;
case 3:
id = 3;
data = {
items: items3,
id: 3
};
break;
case 4:
id = 4;
data = {
items: items4,
id: 4
};
break;
}
this.tabsComponent.openTab(
title,
id,
template,
data,
description
);
}
}
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<h3>Open Tab: </h3>
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary" (click)="openTab(1)">Tab 1</button>
<button type="button" class="btn btn-secondary" (click)="openTab(2)">Tab 2</button>
<button type="button" class="btn btn-secondary" (click)="openTab(3)">Tab 3</button>
<button type="button" class="btn btn-secondary" (click)="openTab(4)">Tab 4</button>
</div>
</div>
<tabs height="400px">
</tabs>
<ng-template let-data="data" #tab>
<price-page [items]="data.items" [id]="data.id"></price-page>
</ng-template>
export class Block {
id: number;
name: string;
spacing: number;
isSpacingPercent: boolean;
}
import { Block } from './block';
export class Item {
id: number;
name: string;
price: number;
block: Block;
inNotes: string;
exNotes: string;
cmp1: number;
cmp2: number;
cmp3: number;
}
.ag-row.first-rank {
font-weight: bold
}
.ag-row.ag-row-level-1:not(.ag-row-selected),
.ag-row.groupped:not(.ag-row-selected) {
background-color: #9fc2fc
}
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { AgEditorComponent } from 'ag-grid-angular';
import { ICellEditorParams } from 'ag-grid';
@Component({
selector: 'price-cell',
templateUrl: './src/price.cellEditor.component.html',
styleUrls: ['./src/price.cellEditor.component.css'],
encapsulation: ViewEncapsulation.None
})
export class PriceCellEditorComponent implements AgEditorComponent {
public params: ICellEditorParams;
public isPercentField: boolean;
public isPercent: boolean;
public agInit(params: ICellEditorParams): void {
this.params = params;
this.isPercentField = this.params['isPercentField'];
this.isPercent = this.params.node.data.block.isSpacingPercent;
}
public getValue() {
return this.params.value;
}
public isPopup?(): boolean {
return false;
}
public afterGuiAttached?(): void {
// if (this.numberBox) {
// this.numberBox.instance.focus();
// const input = <HTMLInputElement>this.numberBox.instance.element().querySelector('.dx-texteditor-input');
// input.select();
// }
}
public switchMode(value) {
this.isPercent = value;
this.params.node.data.block.isSpacingPercent = value;
}
}
<div class="price__editor">
<input type="number" [ngClass]="{'percentField': isPercentField}" [(ngModel)]="params.value"/>
<i *ngIf="isPercentField">
<a [ngClass]="{'active': !isPercent}" (click)="switchMode(false)">$</a>
<a [ngClass]="{'active': isPercent}" (click)="switchMode(true)">%</a>
</i>
</div>
.price__editor i {
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
width: 25px;
text-align: center;
font-style: normal;
right: 0;
color: #d3d3d3;
}
.price__editor i a {
cursor: pointer;
}
.price__editor i a:hover,
.price__editor i .active {
color: #000;
}
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[dynamicTabs]'
})
export class DynamicTabsDirective {
constructor(public viewContainer: ViewContainerRef) { }
}
import { Component, Input } from '@angular/core';
@Component({
selector: 'tab',
templateUrl: './src/tab.component.html'
})
export class TabComponent {
@Input() title: string;
@Input() description: string;
@Input() id: string;
@Input() active = false;
@Input() template;
@Input() dataContext;
@Input() height: string;
}
<div [hidden]="!active" class="tab-content" [style.height]="height">
<ng-content></ng-content>
<ng-container *ngIf="template"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{ data: dataContext }">
</ng-container>
</div>
import {
Component,
ContentChildren,
QueryList,
ComponentFactoryResolver,
ViewChild,
AfterContentInit,
TemplateRef,
Input,
Output,
EventEmitter
} from '@angular/core';
import { TabComponent } from './tab.component';
import { DynamicTabsDirective } from './dynamic-tabs.directive';
@Component({
selector: 'tabs',
templateUrl: './src/tabs.component.html',
styleUrls: ['./src/tabs.component.css']
})
export class TabsComponent implements AfterContentInit {
dynamicTabs: TabComponent[] = [];
skipLog: false;
@Input() height: string;
@ContentChildren(TabComponent) staticTabs: QueryList<TabComponent>;
@ViewChild(DynamicTabsDirective) dynamicTabsPlaceholder;
@Output() close = new EventEmitter();
constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }
// contentChildren are set
ngAfterContentInit() {
// get all active tabs
const activeTabs = this.staticTabs.filter((tab) => tab.active);
// if there is no active tab set, activate the first
if (activeTabs.length === 0) {
if (this.staticTabs.length > 0) {
this.selectTab(this.staticTabs.first);
}
}
}
openTab(title: string, id: string, template: TemplateRef<any>, data: any, description: string) {
const tab = this.dynamicTabs.find(x => x.id === id);
if (!tab) {// get a component factory for our TabComponent
console.log(`<Open tab, id: ${id} ----------------------------------------------->`);
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(TabComponent);
// fetch the view container reference from our anchor directive
const viewContainerRef = this.dynamicTabsPlaceholder.viewContainer;
// alternatively...
// let viewContainerRef = this.dynamicTabPlaceholder;
// create a component instance
const componentRef = viewContainerRef.createComponent(componentFactory);
// set the according properties on our component instance
const instance: TabComponent = componentRef.instance as TabComponent;
instance.title = title;
instance.description = description;
instance.id = id;
instance.template = template;
instance.dataContext = data;
instance.height = this.height;
// remember the dynamic component for rendering the
// tab navigation headers
this.dynamicTabs.push(componentRef.instance as TabComponent);
this.skipLog = true;
// set it active
this.selectTab(this.dynamicTabs[this.dynamicTabs.length - 1]);
} else {
this.selectTab(tab);
}
}
selectTab(selectedTab: TabComponent) {
if (this.skipLog){
this.skipLog = false;
} else {
console.log(`<Switch to tab with id: ${selectedTab.id} ----------------------------------------------->`);
}
// deactivate all tabs
this.staticTabs.toArray().forEach(tab => tab.active = false);
this.dynamicTabs.forEach(tab => tab.active = false);
// activate the tab the user has clicked on.
selectedTab.active = true;
}
closeTab(tab: TabComponent) {
const index = this.dynamicTabs.findIndex(x => x.id === tab.id);
if (index > -1) {
this.close.emit();
// remove the tab from our array
this.dynamicTabs.splice(index, 1);
// destroy our dynamically created component again
const viewContainerRef = this.dynamicTabsPlaceholder.viewContainer;
// let viewContainerRef = this.dynamicTabPlaceholder;
viewContainerRef.remove(index);
// select previous tab
if (this.dynamicTabs.length > 0) {
this.selectTab(this.dynamicTabs[(index - 1) > 0 ? index - 1 : 0]);
}
}
}
closeActiveTab() {
const activeTabs = this.dynamicTabs.filter((tab) => tab.active);
if (activeTabs.length > 0) {
// close the 1st active tab (should only be one at a time)
this.closeTab(activeTabs[0]);
}
}
}
<div class="nav-tabs-horizontal">
<ng-container *ngTemplateOutlet="fixedTabs"></ng-container>
</div>
<ng-content></ng-content>
<ng-template dynamicTabs></ng-template>
<ng-template #fixedTabs>
<ul class="nav nav-tabs" [hidden]="!staticTabs.length && !dynamicTabs.length">
<ng-container *ngTemplateOutlet="tabs"></ng-container>
</ul>
</ng-template>
<ng-template #tabs>
<li *ngFor="let tab of staticTabs" (click)="selectTab(tab)" class="nav-item">
<a class="nav-link" href="javascript:void(0)" [class.active]="tab.active">
<span class="tab-title">
<i *ngIf="tab.hasIcon" [class]="tab.iconClass"></i> {{tab.title}}</span>
</a>
</li>
<!-- dynamic tabs -->
<li *ngFor="let tab of dynamicTabs" (click)="selectTab(tab)" class="nav-item">
<a class="nav-link" [class.active]="tab.active" href="javascript:void(0)">
<div class="nav-link__block">
<span class="tab-title">{{tab.title}}</span>
<span class="tab-description" *ngIf="tab.description">{{tab.description}}</span>
</div>
<div class="nav-link__block_buttons">
<button type="button" class="tab-close" aria-label="Close" (click)="closeTab(tab)">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</a>
</li>
</ng-template>
a.nav-link {
display: block;
float: left;
}
a.nav-link .tab-title {
font-size: 1.6rem;
line-height: 1.6rem;
}
a.nav-link .tab-description {
display: block;
font-size: 1.2rem;
line-height: 1.2rem;
}
a.nav-link button {
font-size: 1.2rem;
font-weight: bold;
padding: 0;
opacity: .5;
background: transparent;
border: 0;
}
a.nav-link button.tab-close {
font-size: 1.5rem;
line-height: 2rem;
}
a.nav-link button.tab-close:focus,
a.nav-link button.tab-close:hover {
opacity: .75;
outline: 0;
}
.nav-link__block {
float: left;
}
.nav-link__block_buttons {
float: left;
padding-left: 5px;
}
import { Block } from '../src/block';
import { Item } from '../src/item';
let items: Item[];
let blocks: Block[];
this.blocks = [];
const block = new Block();
block.id = 1;
block.name = 'Block 1',
block.spacing = 10;
block.isSpacingPercent = false;
this.blocks.push(block);
export const items1 = [
{
id: 1,
name: "Sean Landsman",
price: 5,
block: block,
inNotes: 'string',
exNotes: 'string',
cmp1: 1,
cmp2: 2,
cmp3: 3
},
{
id: 2,
name: "Niall Crosby",
price: 35,
block: block
inNotes: 'string',
exNotes: 'string',
cmp1: 1,
cmp2: 2,
cmp3: 3
},
{
id: 3,
name: "Alberto Guiterzzz",
price: 78,
block: block
inNotes: 'string',
exNotes: 'string',
cmp1: 1,
cmp2: 2,
cmp3: 3
},
{
id: 4,
name: "John Masterson",
price: 98,
block: new Block()
inNotes: 'string',
exNotes: 'string',
cmp1: 1,
cmp2: 2,
cmp3: 3
},
{
id: 5,
name: "Sergey Prontsevich",
price: 44,
block: new Block()
inNotes: 'string',
exNotes: 'string',
cmp1: 1,
cmp2: 2,
cmp3: 3
},
{
id: 6,
name: "Greg House",
price: 15,
block: new Block()
inNotes: 'string',
exNotes: 'string',
cmp1: 1,
cmp2: 2,
cmp3: 3
}
];
import { Block } from '../src/block';
import { Item } from '../src/item';
let items: Item[];
let blocks: Block[];
this.blocks = [];
const block = new Block();
block.id = 1;
block.name = 'Block 1',
block.spacing = 10;
block.isSpacingPercent = false;
this.blocks.push(block);
export const items2 = [
{
id: 1,
name: "Sean Landsman",
price: 5,
block: new Block()
},
{
id: 2,
name: "Niall Crosby",
price: 35,
block: new Block()
},
{
id: 3,
name: "Alberto Guiterzzz",
price: 78,
block: new Block()
},
{
id: 4,
name: "John Masterson",
price: 98,
block: new Block()
},
{
id: 5,
name: "Sergey Prontsevich",
price: 44,
block: new Block()
}
];
import { Block } from '../src/block';
import { Item } from '../src/item';
let items: Item[];
let blocks: Block[];
this.blocks = [];
const block = new Block();
block.id = 1;
block.name = 'Block 1',
block.spacing = 10;
block.isSpacingPercent = false;
this.blocks.push(block);
export const items3 = [
{
id: 1,
name: "Sean Landsman",
price: 5,
block: block
},
{
id: 2,
name: "Niall Crosby",
price: 35,
block: block
},
{
id: 3,
name: "Alberto Guiterzzz",
price: 78,
block: block
},
{
id: 4,
name: "John Masterson",
price: 98,
block: block
},
{
id: 5,
name: "Sergey Prontsevich",
price: 44,
block: block
}
];
import { Block } from '../src/block';
import { Item } from '../src/item';
let items: Item[];
let blocks: Block[];
this.blocks = [];
const block = new Block();
block.id = 1;
block.name = 'Block 1',
block.spacing = 10;
block.isSpacingPercent = false;
this.blocks.push(block);
export const items4 = [
{
id: 1,
name: "Sean Landsman",
price: 5,
block: block
},
{
id: 2,
name: "Niall Crosby",
price: 35,
block: block
},
{
id: 3,
name: "Alberto Guiterzzz",
price: 78,
block: block
},
{
id: 4,
name: "John Masterson",
price: 98,
block: new Block()
},
{
id: 5,
name: "Sergey Prontsevich",
price: 44,
block: new Block()
}
];
import { CurrencyPipe, DecimalPipe } from '@angular/common';
export const colsDef = [
{
headerName: "Item Name",
field: "name",
},
{
headerName: "Price",
field: "price"
},
{
headerName: "Block Name",
field: "block.name"
},
{
headerName: "Spacing",
field: "block.spacing",
editable: function (params) { return params.data.id === 1; },
cellEditor: 'priceCell',
cellEditorParams: {
isPercentField: true,
percentFlagField: 'block.isSpacingPercent'
},
valueFormatter: function (params) {
if (params.data.block.isSpacingPercent) {
return `${(new DecimalPipe('en-us')).transform(params.value, '1.2-2')}%`;
}
return (new CurrencyPipe('en-us')).transform(params.value);
}
},
{
headerName: 'Block Id',
field: 'block.id',
rowGroup: true,
hide: true
},
{
headerName: 'Internal notes',
field: 'inNotes',
},
{
headerName: 'External notes',
field: 'exNotes',
},
{
headerName: '$Cmp1',
field: 'cmp1',
},
{
headerName: '$Cmp2',
field: 'cmp2',
},
{
headerName: '$Cmp3',
field: 'cmp3',
}
];
import { Component, Input } from '@angular/core';
import { PriceCellEditorComponent } from './price.cellEditor.component.ts';
import { colsDef } from '../colsDef.ts';
@Component({
selector: 'grid-wrapper',
templateUrl: './src/grid-wrapper.component.html'
})
export class GridWrapperComponent {
public gridOptions: GridOptions;
private _gridApi: GridApi;
private _columnApi: ColumnApi;
private id: number;
constructor(){
this.gridOptions = <GridOptions>{
columnDefs: colsDef,
onGridReady: (params: GridOptions) => {
this._gridApi = params.api;
this._columnApi = params.columnApi;
this._gridApi.sizeColumnsToFit();
this._columnApi.autoSizeAllColumns('autosizeColumns');
},
rowHeight: 40,
groupUseEntireRow: true,
groupDefaultExpanded: 1,
groupHideOpenParents: true,
groupRowInnerRenderer: (params: any) => {
return params.node.allLeafChildren[0].data.block.name;
},
rowClassRules: {
'first-rank': function (params) { return params.data.id === 1; },
'groupped': function (params) { return params.node.level > 0; }
},
frameworkComponents: {
priceCell: PriceCellEditorComponent
},
enableFilter: true,
singleClickEdit: true,
stopEditingWhenGridLosesFocus: true,
deltaRowDataMode: true,
toolPanelSuppressSideButtons: true,
enableColResize: true,
enableSorting: true,
rowSelection: 'multiple',
getRowNodeId: function (params) {
return params.id;
},
onDisplayedColumnsChanged: (params) => {
if (this._columnApi) {
console.log(`${this.id}: DisplayedColumnsChanged - ${this._columnApi.getAllDisplayedColumns().length} columns; ${this._columnApi.getAllDisplayedVirtualColumns().length} virt columns`);
}
},
onGridSizeChanged: (params) => {
if (this._columnApi) {
console.log(`${this.id}: GridSizeChanged - ${this._columnApi.getAllDisplayedColumns().length} columns; ${this._columnApi.getAllDisplayedVirtualColumns().length} virt columns`);
}
},
onViewportChanged: (params) => {
if (this._columnApi) {
console.log(`${this.id}: ViewportChanged - ${this._columnApi.getAllDisplayedColumns().length} columns; ${this._columnApi.getAllDisplayedVirtualColumns().length} virt columns`);
}
},
onVirtualColumnsChanged: (params) => {
if (this._columnApi) {
console.log(`${this.id}: VirtualColumnsChanged - ${this._columnApi.getAllDisplayedColumns().length} columns; ${this._columnApi.getAllDisplayedVirtualColumns().length} virt columns`);
}
},
onRowDataChanged: (params) => {
if (this._columnApi) {
console.log(`${this.id}: RowDataChanged - ${this._columnApi.getAllDisplayedColumns().length} columns; ${this._columnApi.getAllDisplayedVirtualColumns().length} virt columns`);
}
}
};
}
init(items: [], id: number) {
this.id = id;
setTimeout(()=>{
this._gridApi.setRowData(items);
}, 2000);
}
}
<ag-grid-angular style="width: 100%; height: 350px;" class="ag-theme-fresh"
[gridOptions]="gridOptions">
</ag-grid-angular>
import { Component, Input, AfterViewInit, ViewChild } from '@angular/core';
import { GridWrapperComponent } from './grid-wrapper.component.ts';
@Component({
selector: 'price-page',
templateUrl: './src/price.page.html'
})
export class PricePage implements AfterViewInit {
@Input() items: any;
@Input() id: number;
@ViewChild(GridWrapperComponent) grid: GridWrapperComponent;
ngAfterViewInit(){
this.grid.init(this.items, this.id);
}
}
<grid-wrapper></grid-wrapper>