@tusharghoshbd/ngx-datagrid/bundles/tusharghoshbd-ngx-datagrid.umd.min.js

Angular datagrid component using html

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("ng2-search-filter"),require("ngx-pagination")):"function"==typeof define&&define.amd?define("@tusharghoshbd/ngx-datagrid",["exports","@angular/core","@angular/forms","@angular/common","ng2-search-filter","ngx-pagination"],t):t(((e=e||self).tusharghoshbd=e.tusharghoshbd||{},e.tusharghoshbd["ngx-datagrid"]={}),e.ng.core,e.ng.forms,e.ng.common,e.ng2SearchFilter,e.ngxPagination)}(this,(function(e,t,n,r,i,o){"use strict";var a=function(){function e(){}return e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),s=function(){function e(){this.gridId="ngxDataGridId",this.itemClick=new t.EventEmitter,this.searchText="",this.itemPerPage=5,this.itemPerPageDDL=[5,10,20,50],this.currentPage=1,this.itemClickEvent=!1}return e.prototype.ngOnInit=function(){this.options&&(this.itemPerPageDDL=0==this.options.itemPerPageDDL.length?this.itemPerPageDDL:this.options.itemPerPageDDL,this.itemPerPage=this.itemPerPageDDL[0],this.itemClickEvent=null!=this.options.itemClickEvent?this.options.itemClickEvent:this.itemClickEvent)},e.prototype.ngAfterContentInit=function(){},e.prototype.onListItemClick=function(e){this.itemClickEvent&&this.itemClick.emit(e)},e.prototype.onInputSearch=function(){this.currentPage=1},e.prototype.onChangeItemPerPage=function(){this.currentPage=1},e.prototype.identify=function(e,t){return e},e.decorators=[{type:t.Component,args:[{selector:"ngx-datagrid",template:'<div class="row">\r\n    <div class="col-6 col-sm-6 col-xs-9">\r\n        <label  style="font-weight: 100;">\r\n                <input (input)="onInputSearch()"  [(ngModel)]="searchText" \r\n                    [id]="\'search_\'+gridId"\r\n                    name="search"\r\n                    autocomplete="off"\r\n                    class="form-control mr-sm-2" \r\n                    type="text" placeholder="Search"/>\r\n        </label> \r\n    </div>\r\n    <div class=" col-6 col-sm-6 col-xs-3 text-right">\r\n        <label class="form-group text-right"  style="font-weight: 100;" >\r\n                <select (change)="onChangeItemPerPage()"  [(ngModel)]="itemPerPage" name="itemPerPage" class="form-control" [id]="\'itemPerPage_\'+gridId">\r\n                    <option *ngFor="let item of itemPerPageDDL" [ngValue]="item">{{item}}</option>\r\n                </select>\r\n        </label>\r\n    </div>\r\n</div>\r\n<div class="row">\r\n    <div class="col-sm-12 col-xs-12  col-12">\r\n        <ul [id]="gridId" class="list-group">\r\n            <li *ngFor="let rowDetail of data | filter:searchText | paginate: {id: \'pagination_\'+gridId, itemsPerPage: itemPerPage, currentPage:currentPage }; trackBy: identify" class="{{gridClass}}">\r\n                <div [ngClass]="itemClickEvent ? \'cus-cursor-pointer\' : \'\'"  (click)="onListItemClick(rowDetail)">\r\n                    <strong>\r\n                        <ng-container\r\n                            *ngIf="headerTemplateRef"\r\n                            [ngTemplateOutlet]="headerTemplateRef"\r\n                            [ngTemplateOutletContext]="{$implicit:rowDetail}"\r\n                        >\r\n                        </ng-container>\r\n                    </strong>\r\n                    <ng-container\r\n                        *ngIf="bodyTemplateRef"\r\n                        [ngTemplateOutlet]="bodyTemplateRef"\r\n                        [ngTemplateOutletContext]="{$implicit:rowDetail}"\r\n                    >\r\n                    </ng-container>\r\n                </div>\r\n            </li>\r\n            <li *ngIf="data.length == 0" class="cus-cursor-pointer list-group-item">\r\n                Data is not available.\r\n            </li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n<div class="row">\r\n    <div class="col-sm-12 col-xs-12  col-12 custom-pagination-align">\r\n        <pagination-controls [id]="\'pagination_\'+gridId" (pageChange)="currentPage = $event"></pagination-controls>\r\n    </div>\r\n</div>',styles:[".cus-cursor-pointer{cursor:pointer}.custom-pagination-align{text-align:left!important}@media screen and (max-width:576px){.custom-pagination-align{text-align:center!important}}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={gridId:[{type:t.Input}],data:[{type:t.Input}],gridClass:[{type:t.Input}],options:[{type:t.Input}],itemClick:[{type:t.Output}],headerTemplateRef:[{type:t.ContentChild,args:["header",{static:!1}]}],bodyTemplateRef:[{type:t.ContentChild,args:["body",{static:!1}]}]},e}();var l=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[s],imports:[n.FormsModule,r.CommonModule,i.Ng2SearchPipeModule,o.NgxPaginationModule],exports:[s]}]}],e}();e.NgxDatagridComponent=s,e.NgxDatagridModule=l,e.NgxDatagridService=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=tusharghoshbd-ngx-datagrid.umd.min.js.map