@syncfusion/ej2-angular-grids 29.2.11-ngcc → 30.1.37-ngcc

package/dist/ej2-angular-grids.umd.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-grids.umd.js
-*  version : 29.2.11
+*  version : 30.1.37
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
@@ -13,1003 +13,1003 @@
 	(factory((global['ej2-angular-grids'] = {}),global.ng.core,global.ej2.angular.base,global.ej2.grids,global.ng.common));
 }(this, (function (exports,core,ej2AngularBase,ej2Grids,common) { 'use strict';
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var input = ['allowEditing', 'allowFiltering', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'templateOptions', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
-var outputs = [];
-/**
- * `e-stacked-column` directive represent the stacked column of the Angular Grid.
- * It must be contained in a StackedColumns component(`e-stacked-columns`).
- * ```html
- * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
- *   <e-columns>
- *     <e-column field='ID' width='100'></e-column>
- *     <e-column headerText='Details' width='100'>
- *       <e-stacked-columns>
- *         <e-stacked-column field='Name' width='140'></e-stacked-column>
- *       </e-stacked-columns>
- *     </e-column>
- *   </e-columns>
- * </ejs-grid>
- * ```
- */
-var StackedColumnDirective = /** @class */ (function (_super) {
-    __extends(StackedColumnDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function StackedColumnDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs);
-        _this.directivePropList = input;
-        return _this;
-    }
-    return StackedColumnDirective;
-}(ej2AngularBase.ComplexBase));
-StackedColumnDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-columns>e-column>e-stacked-columns>e-stacked-column',
-                inputs: input,
-                outputs: outputs,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-StackedColumnDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-StackedColumnDirective.propDecorators = {
-    'template': [{ type: core.ContentChild, args: ['template',] },],
-    'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
-    'commandsTemplate': [{ type: core.ContentChild, args: ['commandsTemplate',] },],
-    'filter_itemTemplate': [{ type: core.ContentChild, args: ['filterItemTemplate',] },],
-    'editTemplate': [{ type: core.ContentChild, args: ['editTemplate',] },],
-    'filterTemplate': [{ type: core.ContentChild, args: ['filterTemplate',] },],
-};
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], StackedColumnDirective.prototype, "template", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], StackedColumnDirective.prototype, "headerTemplate", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], StackedColumnDirective.prototype, "commandsTemplate", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], StackedColumnDirective.prototype, "filter_itemTemplate", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], StackedColumnDirective.prototype, "editTemplate", void 0);
-__decorate([
-    ej2AngularBase.Template(),
-    __metadata("design:type", Object)
-], StackedColumnDirective.prototype, "filterTemplate", void 0);
-/**
- * StackedColumn Array Directive
- */
-var StackedColumnsDirective = /** @class */ (function (_super) {
-    __extends(StackedColumnsDirective, _super);
-    function StackedColumnsDirective() {
-        return _super.call(this, 'columns') || this;
-    }
-    return StackedColumnsDirective;
-}(ej2AngularBase.ArrayBase));
-StackedColumnsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-columns>e-column>e-stacked-columns',
-                queries: {
-                    children: new core.ContentChildren(StackedColumnDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-StackedColumnsDirective.ctorParameters = function () { return []; };
-var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$1 = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var input$1 = ['allowEditing', 'allowFiltering', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'templateOptions', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
-var outputs$1 = [];
-/**
- * `e-column` directive represent a column of the Angular Grid.
- * It must be contained in a Grid component(`ejs-grid`).
- * ```html
- * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
- *   <e-columns>
- *    <e-column field='ID' width='100'></e-column>
- *    <e-column field='name' headerText='Name' width='100'></e-column>
- *   </e-columns>
- * </ejs-grid>
- * ```
- */
-var ColumnDirective = /** @class */ (function (_super) {
-    __extends(ColumnDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function ColumnDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['columns'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$1);
-        _this.directivePropList = input$1;
-        return _this;
-    }
-    return ColumnDirective;
-}(ej2AngularBase.ComplexBase));
-ColumnDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-columns>e-column',
-                inputs: input$1,
-                outputs: outputs$1,
-                queries: {
-                    childColumns: new core.ContentChild(StackedColumnsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-ColumnDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-ColumnDirective.propDecorators = {
-    'template': [{ type: core.ContentChild, args: ['template',] },],
-    'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
-    'commandsTemplate': [{ type: core.ContentChild, args: ['commandsTemplate',] },],
-    'filter_itemTemplate': [{ type: core.ContentChild, args: ['filterItemTemplate',] },],
-    'editTemplate': [{ type: core.ContentChild, args: ['editTemplate',] },],
-    'filterTemplate': [{ type: core.ContentChild, args: ['filterTemplate',] },],
-};
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], ColumnDirective.prototype, "template", void 0);
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], ColumnDirective.prototype, "headerTemplate", void 0);
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], ColumnDirective.prototype, "commandsTemplate", void 0);
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], ColumnDirective.prototype, "filter_itemTemplate", void 0);
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], ColumnDirective.prototype, "editTemplate", void 0);
-__decorate$1([
-    ej2AngularBase.Template(),
-    __metadata$1("design:type", Object)
-], ColumnDirective.prototype, "filterTemplate", void 0);
-/**
- * Column Array Directive
- */
-var ColumnsDirective = /** @class */ (function (_super) {
-    __extends(ColumnsDirective, _super);
-    function ColumnsDirective() {
-        return _super.call(this, 'columns') || this;
-    }
-    return ColumnsDirective;
-}(ej2AngularBase.ArrayBase));
-ColumnsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-columns',
-                queries: {
-                    children: new core.ContentChildren(ColumnDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-ColumnsDirective.ctorParameters = function () { return []; };
-var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$2 = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var input$2 = ['columnName', 'customAggregate', 'field', 'footerTemplate', 'format', 'groupCaptionTemplate', 'groupFooterTemplate', 'type'];
-var outputs$2 = [];
-/**
- * `e-aggregate->e-column` directive represent a aggregate column of the Angular Grid.
- * ```html
- * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
- *   <e-columns>
- *     <e-column field='ID' width='100'></e-column>
- *     <e-column field='name' headerText='Name' width='100'></e-column>
- *   </e-columns>
- *   <e-aggregates>
- *     <e-aggregate>
- *       <e-columns>
- *         <e-column field='ID' type='Min'></e-column>
- *       </e-columns>
- *      </e-aggregate>
- *    </e-aggregates>
- * </ejs-grid>
- * ```
- */
-var AggregateColumnDirective = /** @class */ (function (_super) {
-    __extends(AggregateColumnDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function AggregateColumnDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$2);
-        _this.directivePropList = input$2;
-        return _this;
-    }
-    return AggregateColumnDirective;
-}(ej2AngularBase.ComplexBase));
-AggregateColumnDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-aggregates>e-aggregate>e-columns>e-column',
-                inputs: input$2,
-                outputs: outputs$2,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-AggregateColumnDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-AggregateColumnDirective.propDecorators = {
-    'footerTemplate': [{ type: core.ContentChild, args: ['footerTemplate',] },],
-    'groupFooterTemplate': [{ type: core.ContentChild, args: ['groupFooterTemplate',] },],
-    'groupCaptionTemplate': [{ type: core.ContentChild, args: ['groupCaptionTemplate',] },],
-};
-__decorate$2([
-    ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
-], AggregateColumnDirective.prototype, "footerTemplate", void 0);
-__decorate$2([
-    ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
-], AggregateColumnDirective.prototype, "groupFooterTemplate", void 0);
-__decorate$2([
-    ej2AngularBase.Template(),
-    __metadata$2("design:type", Object)
-], AggregateColumnDirective.prototype, "groupCaptionTemplate", void 0);
-/**
- * AggregateColumn Array Directive
- */
-var AggregateColumnsDirective = /** @class */ (function (_super) {
-    __extends(AggregateColumnsDirective, _super);
-    function AggregateColumnsDirective() {
-        return _super.call(this, 'columns') || this;
-    }
-    return AggregateColumnsDirective;
-}(ej2AngularBase.ArrayBase));
-AggregateColumnsDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-aggregates>e-aggregate>e-columns',
-                queries: {
-                    children: new core.ContentChildren(AggregateColumnDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-AggregateColumnsDirective.ctorParameters = function () { return []; };
-var input$3 = ['columns'];
-var outputs$3 = [];
-/**
- * `e-aggregate` directive represent a aggregate row of the Angular Grid.
- * It must be contained in a Grid component(`ejs-grid`).
- * ```html
- * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
- *   <e-columns>
- *     <e-column field='ID' width='100'></e-column>
- *     <e-column field='name' headerText='Name' width='100'></e-column>
- *   </e-columns>
- *   <e-aggregates>
- *     <e-aggregate>
- *       <e-columns>
- *         <e-column field='ID' type='Min'></e-column>
- *       </e-columns>
- *      </e-aggregate>
- *    </e-aggregates>
- * </ejs-grid>
- * ```
- */
-var AggregateDirective = /** @class */ (function (_super) {
-    __extends(AggregateDirective, _super);
-    /**
-     * @param {?} viewContainerRef
-     */
-    function AggregateDirective(viewContainerRef) {
-        var _this = _super.call(this) || this;
-        _this.viewContainerRef = viewContainerRef;
-        _this.tags = ['columns'];
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.registerEvents(outputs$3);
-        _this.directivePropList = input$3;
-        return _this;
-    }
-    return AggregateDirective;
-}(ej2AngularBase.ComplexBase));
-AggregateDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-aggregates>e-aggregate',
-                inputs: input$3,
-                outputs: outputs$3,
-                queries: {
-                    childColumns: new core.ContentChild(AggregateColumnsDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-AggregateDirective.ctorParameters = function () { return [
-    { type: core.ViewContainerRef, },
-]; };
-/**
- * Aggregate Array Directive
- */
-var AggregatesDirective = /** @class */ (function (_super) {
-    __extends(AggregatesDirective, _super);
-    function AggregatesDirective() {
-        return _super.call(this, 'aggregates') || this;
-    }
-    return AggregatesDirective;
-}(ej2AngularBase.ArrayBase));
-AggregatesDirective.decorators = [
-    { type: core.Directive, args: [{
-                selector: 'ejs-grid>e-aggregates',
-                queries: {
-                    children: new core.ContentChildren(AggregateDirective)
-                },
-            },] },
-];
-/**
- * @nocollapse
- */
-AggregatesDirective.ctorParameters = function () { return []; };
-var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$3 = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var inputs = ['adaptiveUIMode', 'aggregates', 'allowExcelExport', 'allowFiltering', 'allowGrouping', 'allowKeyboard', 'allowMultiSorting', 'allowPaging', 'allowPdfExport', 'allowReordering', 'allowResizing', 'allowRowDragAndDrop', 'allowSelection', 'allowSorting', 'allowTextWrap', 'autoFit', 'childGrid', 'clipMode', 'columnChooserSettings', 'columnMenuItems', 'columnQueryMode', 'columns', 'contextMenuItems', 'cssClass', 'currencyCode', 'currentAction', 'currentViewData', 'dataSource', 'detailTemplate', 'editSettings', 'ej2StatePersistenceVersion', 'emptyRecordTemplate', 'enableAdaptiveUI', 'enableAltRow', 'enableAutoFill', 'enableColumnVirtualization', 'enableHeaderFocus', 'enableHover', 'enableHtmlSanitizer', 'enableImmutableMode', 'enableInfiniteScrolling', 'enablePersistence', 'enableRtl', 'enableStickyHeader', 'enableVirtualMaskRow', 'enableVirtualization', 'exportGrids', 'filterSettings', 'frozenColumns', 'frozenRows', 'gridLines', 'groupSettings', 'height', 'hierarchyPrintMode', 'infiniteScrollSettings', 'loadingIndicator', 'locale', 'pageSettings', 'pagerTemplate', 'parentDetails', 'printMode', 'query', 'queryString', 'resizeSettings', 'rowDropSettings', 'rowHeight', 'rowRenderingMode', 'rowTemplate', 'searchSettings', 'selectedRowIndex', 'selectionSettings', 'showColumnChooser', 'showColumnMenu', 'showHider', 'sortSettings', 'textWrapSettings', 'toolbar', 'toolbarTemplate', 'width'];
-var outputs$4 = ['actionBegin', 'actionComplete', 'actionFailure', 'batchAdd', 'batchCancel', 'batchDelete', 'beforeAutoFill', 'beforeBatchAdd', 'beforeBatchDelete', 'beforeBatchSave', 'beforeCopy', 'beforeDataBound', 'beforeDetailTemplateDetach', 'beforeExcelExport', 'beforeOpenAdaptiveDialog', 'beforeOpenColumnChooser', 'beforePaste', 'beforePdfExport', 'beforePrint', 'beginEdit', 'cellDeselected', 'cellDeselecting', 'cellEdit', 'cellSave', 'cellSaved', 'cellSelected', 'cellSelecting', 'checkBoxChange', 'columnDataStateChange', 'columnDeselected', 'columnDeselecting', 'columnDrag', 'columnDragStart', 'columnDrop', 'columnMenuClick', 'columnMenuOpen', 'columnSelected', 'columnSelecting', 'commandClick', 'contextMenuClick', 'contextMenuOpen', 'created', 'dataBound', 'dataSourceChanged', 'dataStateChange', 'destroyed', 'detailDataBound', 'excelAggregateQueryCellInfo', 'excelExportComplete', 'excelHeaderQueryCellInfo', 'excelQueryCellInfo', 'exportDetailDataBound', 'exportDetailTemplate', 'exportGroupCaption', 'headerCellInfo', 'keyPressed', 'lazyLoadGroupCollapse', 'lazyLoadGroupExpand', 'load', 'pdfAggregateQueryCellInfo', 'pdfExportComplete', 'pdfHeaderQueryCellInfo', 'pdfQueryCellInfo', 'printComplete', 'queryCellInfo', 'recordClick', 'recordDoubleClick', 'resizeStart', 'resizeStop', 'resizing', 'rowDataBound', 'rowDeselected', 'rowDeselecting', 'rowDrag', 'rowDragStart', 'rowDragStartHelper', 'rowDrop', 'rowSelected', 'rowSelecting', 'toolbarClick', 'dataSourceChange'];
-var twoWays = ['dataSource'];
-/**
- * `ejs-grid` represents the Angular Grid Component.
- * ```html
- * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-grid>
- * ```
- */
-exports.GridComponent = /** @class */ (function (_super) {
-    __extends(GridComponent, _super);
-    /**
-     * @param {?} ngEle
-     * @param {?} srenderer
-     * @param {?} viewContainerRef
-     * @param {?} injector
-     */
-    function GridComponent(ngEle, srenderer, viewContainerRef, injector) {
-        var _this = _super.call(this) || this;
-        _this.ngEle = ngEle;
-        _this.srenderer = srenderer;
-        _this.viewContainerRef = viewContainerRef;
-        _this.injector = injector;
-        _this.tags = ['columns', 'aggregates'];
-        _this.element = _this.ngEle.nativeElement;
-        _this.injectedModules = _this.injectedModules || [];
-        try {
-            var mod = _this.injector.get('GridsFilter');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_a) { }
-        try {
-            var mod = _this.injector.get('GridsPage');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_b) { }
-        try {
-            var mod = _this.injector.get('GridsSelection');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_c) { }
-        try {
-            var mod = _this.injector.get('GridsSort');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_d) { }
-        try {
-            var mod = _this.injector.get('GridsGroup');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_e) { }
-        try {
-            var mod = _this.injector.get('GridsReorder');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_f) { }
-        try {
-            var mod = _this.injector.get('GridsRowDD');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_g) { }
-        try {
-            var mod = _this.injector.get('GridsDetailRow');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_h) { }
-        try {
-            var mod = _this.injector.get('GridsToolbar');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_j) { }
-        try {
-            var mod = _this.injector.get('GridsAggregate');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_k) { }
-        try {
-            var mod = _this.injector.get('GridsSearch');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_l) { }
-        try {
-            var mod = _this.injector.get('GridsVirtualScroll');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_m) { }
-        try {
-            var mod = _this.injector.get('GridsEdit');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_o) { }
-        try {
-            var mod = _this.injector.get('GridsResize');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_p) { }
-        try {
-            var mod = _this.injector.get('GridsExcelExport');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_q) { }
-        try {
-            var mod = _this.injector.get('GridsPdfExport');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_r) { }
-        try {
-            var mod = _this.injector.get('GridsCommandColumn');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_s) { }
-        try {
-            var mod = _this.injector.get('GridsContextMenu');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_t) { }
-        try {
-            var mod = _this.injector.get('GridsFreeze');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_u) { }
-        try {
-            var mod = _this.injector.get('GridsColumnMenu');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_v) { }
-        try {
-            var mod = _this.injector.get('GridsColumnChooser');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_w) { }
-        try {
-            var mod = _this.injector.get('GridsForeignKey');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_x) { }
-        try {
-            var mod = _this.injector.get('GridsInfiniteScroll');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_y) { }
-        try {
-            var mod = _this.injector.get('GridsLazyLoadGroup');
-            if (_this.injectedModules.indexOf(mod) === -1) {
-                _this.injectedModules.push(mod);
-            }
-        }
-        catch (_z) { }
-        _this.registerEvents(outputs$4);
-        _this.addTwoWay.call(_this, twoWays);
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.context = new ej2AngularBase.ComponentBase();
-        return _this;
-    }
-    /**
-     * @return {?}
-     */
-    GridComponent.prototype.ngOnInit = function () {
-        this.context.ngOnInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    GridComponent.prototype.ngAfterViewInit = function () {
-        this.context.ngAfterViewInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    GridComponent.prototype.ngOnDestroy = function () {
-        this.context.ngOnDestroy(this);
-    };
-    /**
-     * @return {?}
-     */
-    GridComponent.prototype.ngAfterContentChecked = function () {
-        this.tagObjects[0].instance = this.childColumns;
-        if (this.childAggregates) {
-            this.tagObjects[1].instance = /** @type {?} */ (this.childAggregates);
-        }
-        this.context.ngAfterContentChecked(this);
-    };
-    return GridComponent;
-}(ej2Grids.Grid));
-exports.GridComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ejs-grid',
-                inputs: inputs,
-                outputs: outputs$4,
-                template: '',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                queries: {
-                    childColumns: new core.ContentChild(ColumnsDirective),
-                    childAggregates: new core.ContentChild(AggregatesDirective)
-                }
-            },] },
-];
-/**
- * @nocollapse
- */
-exports.GridComponent.ctorParameters = function () { return [
-    { type: core.ElementRef, },
-    { type: core.Renderer2, },
-    { type: core.ViewContainerRef, },
-    { type: core.Injector, },
-]; };
-exports.GridComponent.propDecorators = {
-    'rowTemplate': [{ type: core.ContentChild, args: ['rowTemplate',] },],
-    'emptyRecordTemplate': [{ type: core.ContentChild, args: ['emptyRecordTemplate',] },],
-    'detailTemplate': [{ type: core.ContentChild, args: ['detailTemplate',] },],
-    'toolbarTemplate': [{ type: core.ContentChild, args: ['toolbarTemplate',] },],
-    'pagerTemplate': [{ type: core.ContentChild, args: ['pagerTemplate',] },],
-    'editSettings_template': [{ type: core.ContentChild, args: ['editSettingsTemplate',] },],
-    'groupSettings_captionTemplate': [{ type: core.ContentChild, args: ['groupSettingsCaptionTemplate',] },],
-    'columnChooserSettings_headerTemplate': [{ type: core.ContentChild, args: ['columnChooserSettingsHeaderTemplate',] },],
-    'columnChooserSettings_template': [{ type: core.ContentChild, args: ['columnChooserSettingsTemplate',] },],
-    'columnChooserSettings_footerTemplate': [{ type: core.ContentChild, args: ['columnChooserSettingsFooterTemplate',] },],
-};
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "rowTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "emptyRecordTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "detailTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "toolbarTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "pagerTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "editSettings_template", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "groupSettings_captionTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "columnChooserSettings_headerTemplate", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "columnChooserSettings_template", void 0);
-__decorate$3([
-    ej2AngularBase.Template(),
-    __metadata$3("design:type", Object)
-], exports.GridComponent.prototype, "columnChooserSettings_footerTemplate", void 0);
-exports.GridComponent = __decorate$3([
-    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$3("design:paramtypes", [core.ElementRef,
-        core.Renderer2,
-        core.ViewContainerRef,
-        core.Injector])
-], exports.GridComponent);
-/**
- * NgModule definition for the Grid component.
- */
-var GridModule = /** @class */ (function () {
-    function GridModule() {
-    }
-    return GridModule;
-}());
-GridModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule],
-                declarations: [
-                    exports.GridComponent,
-                    StackedColumnDirective,
-                    StackedColumnsDirective,
-                    ColumnDirective,
-                    ColumnsDirective,
-                    AggregateColumnDirective,
-                    AggregateColumnsDirective,
-                    AggregateDirective,
-                    AggregatesDirective
-                ],
-                exports: [
-                    exports.GridComponent,
-                    StackedColumnDirective,
-                    StackedColumnsDirective,
-                    ColumnDirective,
-                    ColumnsDirective,
-                    AggregateColumnDirective,
-                    AggregateColumnsDirective,
-                    AggregateDirective,
-                    AggregatesDirective
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-GridModule.ctorParameters = function () { return []; };
-var FilterService = { provide: 'GridsFilter', useValue: ej2Grids.Filter };
-var PageService = { provide: 'GridsPage', useValue: ej2Grids.Page };
-var SelectionService = { provide: 'GridsSelection', useValue: ej2Grids.Selection };
-var SortService = { provide: 'GridsSort', useValue: ej2Grids.Sort };
-var GroupService = { provide: 'GridsGroup', useValue: ej2Grids.Group };
-var ReorderService = { provide: 'GridsReorder', useValue: ej2Grids.Reorder };
-var RowDDService = { provide: 'GridsRowDD', useValue: ej2Grids.RowDD };
-var DetailRowService = { provide: 'GridsDetailRow', useValue: ej2Grids.DetailRow };
-var ToolbarService = { provide: 'GridsToolbar', useValue: ej2Grids.Toolbar };
-var AggregateService = { provide: 'GridsAggregate', useValue: ej2Grids.Aggregate };
-var SearchService = { provide: 'GridsSearch', useValue: ej2Grids.Search };
-var VirtualScrollService = { provide: 'GridsVirtualScroll', useValue: ej2Grids.VirtualScroll };
-var EditService = { provide: 'GridsEdit', useValue: ej2Grids.Edit };
-var ResizeService = { provide: 'GridsResize', useValue: ej2Grids.Resize };
-var ExcelExportService = { provide: 'GridsExcelExport', useValue: ej2Grids.ExcelExport };
-var PdfExportService = { provide: 'GridsPdfExport', useValue: ej2Grids.PdfExport };
-var CommandColumnService = { provide: 'GridsCommandColumn', useValue: ej2Grids.CommandColumn };
-var ContextMenuService = { provide: 'GridsContextMenu', useValue: ej2Grids.ContextMenu };
-var FreezeService = { provide: 'GridsFreeze', useValue: ej2Grids.Freeze };
-var ColumnMenuService = { provide: 'GridsColumnMenu', useValue: ej2Grids.ColumnMenu };
-var ColumnChooserService = { provide: 'GridsColumnChooser', useValue: ej2Grids.ColumnChooser };
-var ForeignKeyService = { provide: 'GridsForeignKey', useValue: ej2Grids.ForeignKey };
-var InfiniteScrollService = { provide: 'GridsInfiniteScroll', useValue: ej2Grids.InfiniteScroll };
-var LazyLoadGroupService = { provide: 'GridsLazyLoadGroup', useValue: ej2Grids.LazyLoadGroup };
-/**
- * NgModule definition for the Grid component with providers.
- */
-var GridAllModule = /** @class */ (function () {
-    function GridAllModule() {
-    }
-    return GridAllModule;
-}());
-GridAllModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule, GridModule],
-                exports: [
-                    GridModule
-                ],
-                providers: [
-                    FilterService,
-                    PageService,
-                    SelectionService,
-                    SortService,
-                    GroupService,
-                    ReorderService,
-                    RowDDService,
-                    DetailRowService,
-                    ToolbarService,
-                    AggregateService,
-                    SearchService,
-                    VirtualScrollService,
-                    EditService,
-                    ResizeService,
-                    ExcelExportService,
-                    PdfExportService,
-                    CommandColumnService,
-                    ContextMenuService,
-                    FreezeService,
-                    ColumnMenuService,
-                    ColumnChooserService,
-                    ForeignKeyService,
-                    InfiniteScrollService,
-                    LazyLoadGroupService
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-GridAllModule.ctorParameters = function () { return []; };
-var __decorate$4 = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$4 = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-        return Reflect.metadata(k, v);
-};
-var inputs$1 = ['cssClass', 'currentPage', 'customText', 'enableExternalMessage', 'enablePagerMessage', 'enablePersistence', 'enableQueryString', 'enableRtl', 'externalMessage', 'locale', 'pageCount', 'pageSize', 'pageSizes', 'template', 'totalRecordsCount'];
-var outputs$5 = ['click', 'created', 'dropDownChanged', 'currentPageChange', 'pageSizeChange', 'pageCountChange', 'pageSizesChange'];
-var twoWays$1 = ['currentPage', 'pageSize', 'pageCount', 'pageSizes'];
-/**
- * `ejs-pager` represents the Angular Pager Component.
- * ```html
- * <ejs-pager></ejs-pager>
- * ```
- */
-exports.PagerComponent = /** @class */ (function (_super) {
-    __extends(PagerComponent, _super);
-    /**
-     * @param {?} ngEle
-     * @param {?} srenderer
-     * @param {?} viewContainerRef
-     * @param {?} injector
-     */
-    function PagerComponent(ngEle, srenderer, viewContainerRef, injector) {
-        var _this = _super.call(this) || this;
-        _this.ngEle = ngEle;
-        _this.srenderer = srenderer;
-        _this.viewContainerRef = viewContainerRef;
-        _this.injector = injector;
-        _this.element = _this.ngEle.nativeElement;
-        _this.injectedModules = _this.injectedModules || [];
-        _this.registerEvents(outputs$5);
-        _this.addTwoWay.call(_this, twoWays$1);
-        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
-        _this.context = new ej2AngularBase.ComponentBase();
-        return _this;
-    }
-    /**
-     * @return {?}
-     */
-    PagerComponent.prototype.ngOnInit = function () {
-        this.context.ngOnInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    PagerComponent.prototype.ngAfterViewInit = function () {
-        this.context.ngAfterViewInit(this);
-    };
-    /**
-     * @return {?}
-     */
-    PagerComponent.prototype.ngOnDestroy = function () {
-        this.context.ngOnDestroy(this);
-    };
-    /**
-     * @return {?}
-     */
-    PagerComponent.prototype.ngAfterContentChecked = function () {
-        this.context.ngAfterContentChecked(this);
-    };
-    return PagerComponent;
-}(ej2Grids.Pager));
-exports.PagerComponent.decorators = [
-    { type: core.Component, args: [{
-                selector: 'ejs-pager',
-                inputs: inputs$1,
-                outputs: outputs$5,
-                template: '',
-                changeDetection: core.ChangeDetectionStrategy.OnPush,
-                queries: {}
-            },] },
-];
-/**
- * @nocollapse
- */
-exports.PagerComponent.ctorParameters = function () { return [
-    { type: core.ElementRef, },
-    { type: core.Renderer2, },
-    { type: core.ViewContainerRef, },
-    { type: core.Injector, },
-]; };
-exports.PagerComponent.propDecorators = {
-    'template': [{ type: core.ContentChild, args: ['template',] },],
-};
-__decorate$4([
-    ej2AngularBase.Template(),
-    __metadata$4("design:type", Object)
-], exports.PagerComponent.prototype, "template", void 0);
-exports.PagerComponent = __decorate$4([
-    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
-    __metadata$4("design:paramtypes", [core.ElementRef,
-        core.Renderer2,
-        core.ViewContainerRef,
-        core.Injector])
-], exports.PagerComponent);
-/**
- * NgModule definition for the Pager component.
- */
-var PagerModule = /** @class */ (function () {
-    function PagerModule() {
-    }
-    return PagerModule;
-}());
-PagerModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule],
-                declarations: [
-                    exports.PagerComponent
-                ],
-                exports: [
-                    exports.PagerComponent
-                ]
-            },] },
-];
-/**
- * @nocollapse
- */
-PagerModule.ctorParameters = function () { return []; };
-/**
- * NgModule definition for the Pager component with providers.
- */
-var PagerAllModule = /** @class */ (function () {
-    function PagerAllModule() {
-    }
-    return PagerAllModule;
-}());
-PagerAllModule.decorators = [
-    { type: core.NgModule, args: [{
-                imports: [common.CommonModule, PagerModule],
-                exports: [
-                    PagerModule
-                ],
-                providers: []
-            },] },
-];
-/**
- * @nocollapse
- */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var input = ['allowEditing', 'allowFiltering', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'templateOptions', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
+var outputs = [];
+/**
+ * `e-stacked-column` directive represent the stacked column of the Angular Grid.
+ * It must be contained in a StackedColumns component(`e-stacked-columns`).
+ * ```html
+ * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
+ *   <e-columns>
+ *     <e-column field='ID' width='100'></e-column>
+ *     <e-column headerText='Details' width='100'>
+ *       <e-stacked-columns>
+ *         <e-stacked-column field='Name' width='140'></e-stacked-column>
+ *       </e-stacked-columns>
+ *     </e-column>
+ *   </e-columns>
+ * </ejs-grid>
+ * ```
+ */
+var StackedColumnDirective = /** @class */ (function (_super) {
+    __extends(StackedColumnDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function StackedColumnDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs);
+        _this.directivePropList = input;
+        return _this;
+    }
+    return StackedColumnDirective;
+}(ej2AngularBase.ComplexBase));
+StackedColumnDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-columns>e-column>e-stacked-columns>e-stacked-column',
+                inputs: input,
+                outputs: outputs,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+StackedColumnDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+StackedColumnDirective.propDecorators = {
+    'template': [{ type: core.ContentChild, args: ['template',] },],
+    'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
+    'commandsTemplate': [{ type: core.ContentChild, args: ['commandsTemplate',] },],
+    'filter_itemTemplate': [{ type: core.ContentChild, args: ['filterItemTemplate',] },],
+    'editTemplate': [{ type: core.ContentChild, args: ['editTemplate',] },],
+    'filterTemplate': [{ type: core.ContentChild, args: ['filterTemplate',] },],
+};
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "template", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "headerTemplate", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "commandsTemplate", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "filter_itemTemplate", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "editTemplate", void 0);
+__decorate([
+    ej2AngularBase.Template(),
+    __metadata("design:type", Object)
+], StackedColumnDirective.prototype, "filterTemplate", void 0);
+/**
+ * StackedColumn Array Directive
+ */
+var StackedColumnsDirective = /** @class */ (function (_super) {
+    __extends(StackedColumnsDirective, _super);
+    function StackedColumnsDirective() {
+        return _super.call(this, 'columns') || this;
+    }
+    return StackedColumnsDirective;
+}(ej2AngularBase.ArrayBase));
+StackedColumnsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-columns>e-column>e-stacked-columns',
+                queries: {
+                    children: new core.ContentChildren(StackedColumnDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+StackedColumnsDirective.ctorParameters = function () { return []; };
+var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$1 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var input$1 = ['allowEditing', 'allowFiltering', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'templateOptions', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];
+var outputs$1 = [];
+/**
+ * `e-column` directive represent a column of the Angular Grid.
+ * It must be contained in a Grid component(`ejs-grid`).
+ * ```html
+ * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
+ *   <e-columns>
+ *    <e-column field='ID' width='100'></e-column>
+ *    <e-column field='name' headerText='Name' width='100'></e-column>
+ *   </e-columns>
+ * </ejs-grid>
+ * ```
+ */
+var ColumnDirective = /** @class */ (function (_super) {
+    __extends(ColumnDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function ColumnDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['columns'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$1);
+        _this.directivePropList = input$1;
+        return _this;
+    }
+    return ColumnDirective;
+}(ej2AngularBase.ComplexBase));
+ColumnDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-columns>e-column',
+                inputs: input$1,
+                outputs: outputs$1,
+                queries: {
+                    childColumns: new core.ContentChild(StackedColumnsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ColumnDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+ColumnDirective.propDecorators = {
+    'template': [{ type: core.ContentChild, args: ['template',] },],
+    'headerTemplate': [{ type: core.ContentChild, args: ['headerTemplate',] },],
+    'commandsTemplate': [{ type: core.ContentChild, args: ['commandsTemplate',] },],
+    'filter_itemTemplate': [{ type: core.ContentChild, args: ['filterItemTemplate',] },],
+    'editTemplate': [{ type: core.ContentChild, args: ['editTemplate',] },],
+    'filterTemplate': [{ type: core.ContentChild, args: ['filterTemplate',] },],
+};
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "template", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "headerTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "commandsTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "filter_itemTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "editTemplate", void 0);
+__decorate$1([
+    ej2AngularBase.Template(),
+    __metadata$1("design:type", Object)
+], ColumnDirective.prototype, "filterTemplate", void 0);
+/**
+ * Column Array Directive
+ */
+var ColumnsDirective = /** @class */ (function (_super) {
+    __extends(ColumnsDirective, _super);
+    function ColumnsDirective() {
+        return _super.call(this, 'columns') || this;
+    }
+    return ColumnsDirective;
+}(ej2AngularBase.ArrayBase));
+ColumnsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-columns',
+                queries: {
+                    children: new core.ContentChildren(ColumnDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+ColumnsDirective.ctorParameters = function () { return []; };
+var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$2 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var input$2 = ['columnName', 'customAggregate', 'field', 'footerTemplate', 'format', 'groupCaptionTemplate', 'groupFooterTemplate', 'type'];
+var outputs$2 = [];
+/**
+ * `e-aggregate->e-column` directive represent a aggregate column of the Angular Grid.
+ * ```html
+ * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
+ *   <e-columns>
+ *     <e-column field='ID' width='100'></e-column>
+ *     <e-column field='name' headerText='Name' width='100'></e-column>
+ *   </e-columns>
+ *   <e-aggregates>
+ *     <e-aggregate>
+ *       <e-columns>
+ *         <e-column field='ID' type='Min'></e-column>
+ *       </e-columns>
+ *      </e-aggregate>
+ *    </e-aggregates>
+ * </ejs-grid>
+ * ```
+ */
+var AggregateColumnDirective = /** @class */ (function (_super) {
+    __extends(AggregateColumnDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function AggregateColumnDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$2);
+        _this.directivePropList = input$2;
+        return _this;
+    }
+    return AggregateColumnDirective;
+}(ej2AngularBase.ComplexBase));
+AggregateColumnDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-aggregates>e-aggregate>e-columns>e-column',
+                inputs: input$2,
+                outputs: outputs$2,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+AggregateColumnDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+AggregateColumnDirective.propDecorators = {
+    'footerTemplate': [{ type: core.ContentChild, args: ['footerTemplate',] },],
+    'groupFooterTemplate': [{ type: core.ContentChild, args: ['groupFooterTemplate',] },],
+    'groupCaptionTemplate': [{ type: core.ContentChild, args: ['groupCaptionTemplate',] },],
+};
+__decorate$2([
+    ej2AngularBase.Template(),
+    __metadata$2("design:type", Object)
+], AggregateColumnDirective.prototype, "footerTemplate", void 0);
+__decorate$2([
+    ej2AngularBase.Template(),
+    __metadata$2("design:type", Object)
+], AggregateColumnDirective.prototype, "groupFooterTemplate", void 0);
+__decorate$2([
+    ej2AngularBase.Template(),
+    __metadata$2("design:type", Object)
+], AggregateColumnDirective.prototype, "groupCaptionTemplate", void 0);
+/**
+ * AggregateColumn Array Directive
+ */
+var AggregateColumnsDirective = /** @class */ (function (_super) {
+    __extends(AggregateColumnsDirective, _super);
+    function AggregateColumnsDirective() {
+        return _super.call(this, 'columns') || this;
+    }
+    return AggregateColumnsDirective;
+}(ej2AngularBase.ArrayBase));
+AggregateColumnsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-aggregates>e-aggregate>e-columns',
+                queries: {
+                    children: new core.ContentChildren(AggregateColumnDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+AggregateColumnsDirective.ctorParameters = function () { return []; };
+var input$3 = ['columns'];
+var outputs$3 = [];
+/**
+ * `e-aggregate` directive represent a aggregate row of the Angular Grid.
+ * It must be contained in a Grid component(`ejs-grid`).
+ * ```html
+ * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'>
+ *   <e-columns>
+ *     <e-column field='ID' width='100'></e-column>
+ *     <e-column field='name' headerText='Name' width='100'></e-column>
+ *   </e-columns>
+ *   <e-aggregates>
+ *     <e-aggregate>
+ *       <e-columns>
+ *         <e-column field='ID' type='Min'></e-column>
+ *       </e-columns>
+ *      </e-aggregate>
+ *    </e-aggregates>
+ * </ejs-grid>
+ * ```
+ */
+var AggregateDirective = /** @class */ (function (_super) {
+    __extends(AggregateDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function AggregateDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['columns'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$3);
+        _this.directivePropList = input$3;
+        return _this;
+    }
+    return AggregateDirective;
+}(ej2AngularBase.ComplexBase));
+AggregateDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-aggregates>e-aggregate',
+                inputs: input$3,
+                outputs: outputs$3,
+                queries: {
+                    childColumns: new core.ContentChild(AggregateColumnsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+AggregateDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * Aggregate Array Directive
+ */
+var AggregatesDirective = /** @class */ (function (_super) {
+    __extends(AggregatesDirective, _super);
+    function AggregatesDirective() {
+        return _super.call(this, 'aggregates') || this;
+    }
+    return AggregatesDirective;
+}(ej2AngularBase.ArrayBase));
+AggregatesDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'ejs-grid>e-aggregates',
+                queries: {
+                    children: new core.ContentChildren(AggregateDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+AggregatesDirective.ctorParameters = function () { return []; };
+var __decorate$3 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$3 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var inputs = ['adaptiveUIMode', 'aggregates', 'allowExcelExport', 'allowFiltering', 'allowGrouping', 'allowKeyboard', 'allowMultiSorting', 'allowPaging', 'allowPdfExport', 'allowReordering', 'allowResizing', 'allowRowDragAndDrop', 'allowSelection', 'allowSorting', 'allowTextWrap', 'autoFit', 'childGrid', 'clipMode', 'columnChooserSettings', 'columnMenuItems', 'columnQueryMode', 'columns', 'contextMenuItems', 'cssClass', 'currencyCode', 'currentAction', 'currentViewData', 'dataSource', 'detailTemplate', 'editSettings', 'ej2StatePersistenceVersion', 'emptyRecordTemplate', 'enableAdaptiveUI', 'enableAltRow', 'enableAutoFill', 'enableColumnVirtualization', 'enableHeaderFocus', 'enableHover', 'enableHtmlSanitizer', 'enableImmutableMode', 'enableInfiniteScrolling', 'enablePersistence', 'enableRtl', 'enableStickyHeader', 'enableVirtualMaskRow', 'enableVirtualization', 'exportGrids', 'filterSettings', 'frozenColumns', 'frozenRows', 'gridLines', 'groupSettings', 'height', 'hierarchyPrintMode', 'infiniteScrollSettings', 'loadingIndicator', 'locale', 'pageSettings', 'pagerTemplate', 'parentDetails', 'printMode', 'query', 'queryString', 'resizeSettings', 'rowDropSettings', 'rowHeight', 'rowRenderingMode', 'rowTemplate', 'searchSettings', 'selectedRowIndex', 'selectionSettings', 'showColumnChooser', 'showColumnMenu', 'showHider', 'sortSettings', 'textWrapSettings', 'toolbar', 'toolbarTemplate', 'width'];
+var outputs$4 = ['actionBegin', 'actionComplete', 'actionFailure', 'batchAdd', 'batchCancel', 'batchDelete', 'beforeAutoFill', 'beforeBatchAdd', 'beforeBatchDelete', 'beforeBatchSave', 'beforeCopy', 'beforeCustomFilterOpen', 'beforeDataBound', 'beforeDetailTemplateDetach', 'beforeExcelExport', 'beforeOpenAdaptiveDialog', 'beforeOpenColumnChooser', 'beforePaste', 'beforePdfExport', 'beforePrint', 'beginEdit', 'cellDeselected', 'cellDeselecting', 'cellEdit', 'cellSave', 'cellSaved', 'cellSelected', 'cellSelecting', 'checkBoxChange', 'columnDataStateChange', 'columnDeselected', 'columnDeselecting', 'columnDrag', 'columnDragStart', 'columnDrop', 'columnMenuClick', 'columnMenuClose', 'columnMenuOpen', 'columnSelected', 'columnSelecting', 'commandClick', 'contextMenuClick', 'contextMenuClose', 'contextMenuOpen', 'created', 'dataBound', 'dataSourceChanged', 'dataStateChange', 'destroyed', 'detailDataBound', 'excelAggregateQueryCellInfo', 'excelExportComplete', 'excelHeaderQueryCellInfo', 'excelQueryCellInfo', 'exportDetailDataBound', 'exportDetailTemplate', 'exportGroupCaption', 'headerCellInfo', 'keyPressed', 'lazyLoadGroupCollapse', 'lazyLoadGroupExpand', 'load', 'pdfAggregateQueryCellInfo', 'pdfExportComplete', 'pdfHeaderQueryCellInfo', 'pdfQueryCellInfo', 'printComplete', 'queryCellInfo', 'recordClick', 'recordDoubleClick', 'resizeStart', 'resizeStop', 'resizing', 'rowDataBound', 'rowDeselected', 'rowDeselecting', 'rowDrag', 'rowDragStart', 'rowDragStartHelper', 'rowDrop', 'rowSelected', 'rowSelecting', 'toolbarClick', 'dataSourceChange'];
+var twoWays = ['dataSource'];
+/**
+ * `ejs-grid` represents the Angular Grid Component.
+ * ```html
+ * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-grid>
+ * ```
+ */
+exports.GridComponent = /** @class */ (function (_super) {
+    __extends(GridComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function GridComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.tags = ['columns', 'aggregates'];
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        try {
+            var mod = _this.injector.get('GridsFilter');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_a) { }
+        try {
+            var mod = _this.injector.get('GridsPage');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_b) { }
+        try {
+            var mod = _this.injector.get('GridsSelection');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_c) { }
+        try {
+            var mod = _this.injector.get('GridsSort');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_d) { }
+        try {
+            var mod = _this.injector.get('GridsGroup');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_e) { }
+        try {
+            var mod = _this.injector.get('GridsReorder');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_f) { }
+        try {
+            var mod = _this.injector.get('GridsRowDD');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_g) { }
+        try {
+            var mod = _this.injector.get('GridsDetailRow');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_h) { }
+        try {
+            var mod = _this.injector.get('GridsToolbar');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_j) { }
+        try {
+            var mod = _this.injector.get('GridsAggregate');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_k) { }
+        try {
+            var mod = _this.injector.get('GridsSearch');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_l) { }
+        try {
+            var mod = _this.injector.get('GridsVirtualScroll');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_m) { }
+        try {
+            var mod = _this.injector.get('GridsEdit');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_o) { }
+        try {
+            var mod = _this.injector.get('GridsResize');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_p) { }
+        try {
+            var mod = _this.injector.get('GridsExcelExport');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_q) { }
+        try {
+            var mod = _this.injector.get('GridsPdfExport');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_r) { }
+        try {
+            var mod = _this.injector.get('GridsCommandColumn');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_s) { }
+        try {
+            var mod = _this.injector.get('GridsContextMenu');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_t) { }
+        try {
+            var mod = _this.injector.get('GridsFreeze');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_u) { }
+        try {
+            var mod = _this.injector.get('GridsColumnMenu');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_v) { }
+        try {
+            var mod = _this.injector.get('GridsColumnChooser');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_w) { }
+        try {
+            var mod = _this.injector.get('GridsForeignKey');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_x) { }
+        try {
+            var mod = _this.injector.get('GridsInfiniteScroll');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_y) { }
+        try {
+            var mod = _this.injector.get('GridsLazyLoadGroup');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_z) { }
+        _this.registerEvents(outputs$4);
+        _this.addTwoWay.call(_this, twoWays);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    GridComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    GridComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    GridComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    GridComponent.prototype.ngAfterContentChecked = function () {
+        this.tagObjects[0].instance = this.childColumns;
+        if (this.childAggregates) {
+            this.tagObjects[1].instance = /** @type {?} */ (this.childAggregates);
+        }
+        this.context.ngAfterContentChecked(this);
+    };
+    return GridComponent;
+}(ej2Grids.Grid));
+exports.GridComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-grid',
+                inputs: inputs,
+                outputs: outputs$4,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {
+                    childColumns: new core.ContentChild(ColumnsDirective),
+                    childAggregates: new core.ContentChild(AggregatesDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.GridComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.GridComponent.propDecorators = {
+    'rowTemplate': [{ type: core.ContentChild, args: ['rowTemplate',] },],
+    'emptyRecordTemplate': [{ type: core.ContentChild, args: ['emptyRecordTemplate',] },],
+    'detailTemplate': [{ type: core.ContentChild, args: ['detailTemplate',] },],
+    'toolbarTemplate': [{ type: core.ContentChild, args: ['toolbarTemplate',] },],
+    'pagerTemplate': [{ type: core.ContentChild, args: ['pagerTemplate',] },],
+    'editSettings_template': [{ type: core.ContentChild, args: ['editSettingsTemplate',] },],
+    'groupSettings_captionTemplate': [{ type: core.ContentChild, args: ['groupSettingsCaptionTemplate',] },],
+    'columnChooserSettings_headerTemplate': [{ type: core.ContentChild, args: ['columnChooserSettingsHeaderTemplate',] },],
+    'columnChooserSettings_template': [{ type: core.ContentChild, args: ['columnChooserSettingsTemplate',] },],
+    'columnChooserSettings_footerTemplate': [{ type: core.ContentChild, args: ['columnChooserSettingsFooterTemplate',] },],
+};
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "rowTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "emptyRecordTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "detailTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "toolbarTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "pagerTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "editSettings_template", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "groupSettings_captionTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "columnChooserSettings_headerTemplate", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "columnChooserSettings_template", void 0);
+__decorate$3([
+    ej2AngularBase.Template(),
+    __metadata$3("design:type", Object)
+], exports.GridComponent.prototype, "columnChooserSettings_footerTemplate", void 0);
+exports.GridComponent = __decorate$3([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata$3("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.GridComponent);
+/**
+ * NgModule definition for the Grid component.
+ */
+var GridModule = /** @class */ (function () {
+    function GridModule() {
+    }
+    return GridModule;
+}());
+GridModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.GridComponent,
+                    StackedColumnDirective,
+                    StackedColumnsDirective,
+                    ColumnDirective,
+                    ColumnsDirective,
+                    AggregateColumnDirective,
+                    AggregateColumnsDirective,
+                    AggregateDirective,
+                    AggregatesDirective
+                ],
+                exports: [
+                    exports.GridComponent,
+                    StackedColumnDirective,
+                    StackedColumnsDirective,
+                    ColumnDirective,
+                    ColumnsDirective,
+                    AggregateColumnDirective,
+                    AggregateColumnsDirective,
+                    AggregateDirective,
+                    AggregatesDirective
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+GridModule.ctorParameters = function () { return []; };
+var FilterService = { provide: 'GridsFilter', useValue: ej2Grids.Filter };
+var PageService = { provide: 'GridsPage', useValue: ej2Grids.Page };
+var SelectionService = { provide: 'GridsSelection', useValue: ej2Grids.Selection };
+var SortService = { provide: 'GridsSort', useValue: ej2Grids.Sort };
+var GroupService = { provide: 'GridsGroup', useValue: ej2Grids.Group };
+var ReorderService = { provide: 'GridsReorder', useValue: ej2Grids.Reorder };
+var RowDDService = { provide: 'GridsRowDD', useValue: ej2Grids.RowDD };
+var DetailRowService = { provide: 'GridsDetailRow', useValue: ej2Grids.DetailRow };
+var ToolbarService = { provide: 'GridsToolbar', useValue: ej2Grids.Toolbar };
+var AggregateService = { provide: 'GridsAggregate', useValue: ej2Grids.Aggregate };
+var SearchService = { provide: 'GridsSearch', useValue: ej2Grids.Search };
+var VirtualScrollService = { provide: 'GridsVirtualScroll', useValue: ej2Grids.VirtualScroll };
+var EditService = { provide: 'GridsEdit', useValue: ej2Grids.Edit };
+var ResizeService = { provide: 'GridsResize', useValue: ej2Grids.Resize };
+var ExcelExportService = { provide: 'GridsExcelExport', useValue: ej2Grids.ExcelExport };
+var PdfExportService = { provide: 'GridsPdfExport', useValue: ej2Grids.PdfExport };
+var CommandColumnService = { provide: 'GridsCommandColumn', useValue: ej2Grids.CommandColumn };
+var ContextMenuService = { provide: 'GridsContextMenu', useValue: ej2Grids.ContextMenu };
+var FreezeService = { provide: 'GridsFreeze', useValue: ej2Grids.Freeze };
+var ColumnMenuService = { provide: 'GridsColumnMenu', useValue: ej2Grids.ColumnMenu };
+var ColumnChooserService = { provide: 'GridsColumnChooser', useValue: ej2Grids.ColumnChooser };
+var ForeignKeyService = { provide: 'GridsForeignKey', useValue: ej2Grids.ForeignKey };
+var InfiniteScrollService = { provide: 'GridsInfiniteScroll', useValue: ej2Grids.InfiniteScroll };
+var LazyLoadGroupService = { provide: 'GridsLazyLoadGroup', useValue: ej2Grids.LazyLoadGroup };
+/**
+ * NgModule definition for the Grid component with providers.
+ */
+var GridAllModule = /** @class */ (function () {
+    function GridAllModule() {
+    }
+    return GridAllModule;
+}());
+GridAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, GridModule],
+                exports: [
+                    GridModule
+                ],
+                providers: [
+                    FilterService,
+                    PageService,
+                    SelectionService,
+                    SortService,
+                    GroupService,
+                    ReorderService,
+                    RowDDService,
+                    DetailRowService,
+                    ToolbarService,
+                    AggregateService,
+                    SearchService,
+                    VirtualScrollService,
+                    EditService,
+                    ResizeService,
+                    ExcelExportService,
+                    PdfExportService,
+                    CommandColumnService,
+                    ContextMenuService,
+                    FreezeService,
+                    ColumnMenuService,
+                    ColumnChooserService,
+                    ForeignKeyService,
+                    InfiniteScrollService,
+                    LazyLoadGroupService
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+GridAllModule.ctorParameters = function () { return []; };
+var __decorate$4 = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$4 = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+var inputs$1 = ['cssClass', 'currentPage', 'customText', 'enableExternalMessage', 'enablePagerMessage', 'enablePersistence', 'enableQueryString', 'enableRtl', 'externalMessage', 'locale', 'pageCount', 'pageSize', 'pageSizes', 'template', 'totalRecordsCount'];
+var outputs$5 = ['click', 'created', 'dropDownChanged', 'currentPageChange', 'pageSizeChange', 'pageCountChange', 'pageSizesChange'];
+var twoWays$1 = ['currentPage', 'pageSize', 'pageCount', 'pageSizes'];
+/**
+ * `ejs-pager` represents the Angular Pager Component.
+ * ```html
+ * <ejs-pager></ejs-pager>
+ * ```
+ */
+exports.PagerComponent = /** @class */ (function (_super) {
+    __extends(PagerComponent, _super);
+    /**
+     * @param {?} ngEle
+     * @param {?} srenderer
+     * @param {?} viewContainerRef
+     * @param {?} injector
+     */
+    function PagerComponent(ngEle, srenderer, viewContainerRef, injector) {
+        var _this = _super.call(this) || this;
+        _this.ngEle = ngEle;
+        _this.srenderer = srenderer;
+        _this.viewContainerRef = viewContainerRef;
+        _this.injector = injector;
+        _this.element = _this.ngEle.nativeElement;
+        _this.injectedModules = _this.injectedModules || [];
+        _this.registerEvents(outputs$5);
+        _this.addTwoWay.call(_this, twoWays$1);
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.context = new ej2AngularBase.ComponentBase();
+        return _this;
+    }
+    /**
+     * @return {?}
+     */
+    PagerComponent.prototype.ngOnInit = function () {
+        this.context.ngOnInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    PagerComponent.prototype.ngAfterViewInit = function () {
+        this.context.ngAfterViewInit(this);
+    };
+    /**
+     * @return {?}
+     */
+    PagerComponent.prototype.ngOnDestroy = function () {
+        this.context.ngOnDestroy(this);
+    };
+    /**
+     * @return {?}
+     */
+    PagerComponent.prototype.ngAfterContentChecked = function () {
+        this.context.ngAfterContentChecked(this);
+    };
+    return PagerComponent;
+}(ej2Grids.Pager));
+exports.PagerComponent.decorators = [
+    { type: core.Component, args: [{
+                selector: 'ejs-pager',
+                inputs: inputs$1,
+                outputs: outputs$5,
+                template: '',
+                changeDetection: core.ChangeDetectionStrategy.OnPush,
+                queries: {}
+            },] },
+];
+/**
+ * @nocollapse
+ */
+exports.PagerComponent.ctorParameters = function () { return [
+    { type: core.ElementRef, },
+    { type: core.Renderer2, },
+    { type: core.ViewContainerRef, },
+    { type: core.Injector, },
+]; };
+exports.PagerComponent.propDecorators = {
+    'template': [{ type: core.ContentChild, args: ['template',] },],
+};
+__decorate$4([
+    ej2AngularBase.Template(),
+    __metadata$4("design:type", Object)
+], exports.PagerComponent.prototype, "template", void 0);
+exports.PagerComponent = __decorate$4([
+    ej2AngularBase.ComponentMixins([ej2AngularBase.ComponentBase]),
+    __metadata$4("design:paramtypes", [core.ElementRef,
+        core.Renderer2,
+        core.ViewContainerRef,
+        core.Injector])
+], exports.PagerComponent);
+/**
+ * NgModule definition for the Pager component.
+ */
+var PagerModule = /** @class */ (function () {
+    function PagerModule() {
+    }
+    return PagerModule;
+}());
+PagerModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [
+                    exports.PagerComponent
+                ],
+                exports: [
+                    exports.PagerComponent
+                ]
+            },] },
+];
+/**
+ * @nocollapse
+ */
+PagerModule.ctorParameters = function () { return []; };
+/**
+ * NgModule definition for the Pager component with providers.
+ */
+var PagerAllModule = /** @class */ (function () {
+    function PagerAllModule() {
+    }
+    return PagerAllModule;
+}());
+PagerAllModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule, PagerModule],
+                exports: [
+                    PagerModule
+                ],
+                providers: []
+            },] },
+];
+/**
+ * @nocollapse
+ */
 PagerAllModule.ctorParameters = function () { return []; };
 
 exports.StackedColumnDirective = StackedColumnDirective;
@@ -1345,8 +1345,10 @@ exports.contextMenuClick = ej2Grids.contextMenuClick;
 exports.freezeRender = ej2Grids.freezeRender;
 exports.freezeRefresh = ej2Grids.freezeRefresh;
 exports.contextMenuOpen = ej2Grids.contextMenuOpen;
+exports.contextMenuClose = ej2Grids.contextMenuClose;
 exports.columnMenuClick = ej2Grids.columnMenuClick;
 exports.columnMenuOpen = ej2Grids.columnMenuOpen;
+exports.columnMenuClose = ej2Grids.columnMenuClose;
 exports.filterOpen = ej2Grids.filterOpen;
 exports.filterDialogCreated = ej2Grids.filterDialogCreated;
 exports.filterMenuClose = ej2Grids.filterMenuClose;
@@ -1378,6 +1380,7 @@ exports.beforeBatchCancel = ej2Grids.beforeBatchCancel;
 exports.batchEditFormRendered = ej2Grids.batchEditFormRendered;
 exports.partialRefresh = ej2Grids.partialRefresh;
 exports.beforeCustomFilterOpen = ej2Grids.beforeCustomFilterOpen;
+exports.customFilterOpen = ej2Grids.customFilterOpen;
 exports.selectVirtualRow = ej2Grids.selectVirtualRow;
 exports.columnsPrepared = ej2Grids.columnsPrepared;
 exports.cBoxFltrBegin = ej2Grids.cBoxFltrBegin;