Angular 2 Grid

Setup

$ npm install$ typings install$ gulp build

Config

{'margins':[10],//  The size of the margins of each item. Supports up to four values in the same way as CSS margins. Can be updated using setMargins()'draggable':true,//  Whether the items can be dragged. Can be updated using enableDrag()/disableDrag()'resizable':true,//  Whether the items can be resized. Can be updated using enableResize()/disableResize()'max_cols':0,//  The maximum number of columns allowed. Set to 0 for infinite. Cannot be used with max_rows'max_rows':0,//  The maximum number of rows allowed. Set to 0 for infinite. Cannot be used with max_cols'visible_cols':0,//  The number of columns shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_cols'visible_rows':0,//  The number of rows shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_rows'min_cols':0,//  The minimum number of columns allowed. Can be any number greater than or equal to 1.'min_rows':0,//  The minimum number of rows allowed. Can be any number greater than or equal to 1.'col_width':250,//  The width of each column'row_height':250,//  The height of each row'cascade':'up',//  The direction to cascade grid items ('up', 'right', 'down', 'left')'min_width':100,//  The minimum width of an item. If greater than col_width, this will update the value of min_cols'min_height':100,//  The minimum height of an item. If greater than row_height, this will update the value of min_rows'fix_to_grid':false,//  Fix all item movements to the grid'auto_style':true,//  Automatically add required element styles at run-time'auto_resize':false,//  Automatically set col_width/row_height so that max_cols/max_rows fills the screen. Only has effect is max_cols or max_rows is set'maintain_ratio':false,//  Attempts to maintain aspect ratio based on the colWidth/rowHeight values set in the config'prefer_new':false,//  When adding new items, will use that items position ahead of existing items'limit_to_screen':false,//  When resizing the screen, with this true and auto_resize false, the grid will re-arrange to fit the screen size. Please note, at present this only works with cascade direction up.}

{'col':1,//  The start column for the item'row':1,//  The start row for the item'sizex':1,//  The start width in terms of columns for the item'sizey':1,//  The start height in terms of rows for the item'dragHandle':null,//  The selector to be used for the drag handle. If null, uses the whole item'resizeHandle':null,//  The selector to be used for the resize handle. If null, uses 'borderSize' pixels from the right for horizontal resize,//    'borderSize' pixels from the bottom for vertical, and the square in the corner bottom-right for both'borderSize':15,'fixed':false,//  If the grid item should be cascaded or not. If yes, manual movement is required'draggable':true,//  If the grid item can be dragged. If this or the global setting is set to false, the item cannot be dragged.'resizable':true,//  If the grid item can be resized. If this or the global setting is set to false, the item cannot be resized.'payload':null,//  An optional custom payload (string/number/object) to be used to identify the item for serialization'maxCols':0,//  The maximum number of columns for a particular item. This value will only override the value from the grid (if set) if it is smaller'minCols':0,//  The minimum number of columns for a particular item. This value will only override the value from the grid if larger'maxRows':0,//  The maximum number of rows for a particular item. This value will only override the value from the grid (if set) if it is smaller'minRows':0,//  The minimum number of rows for a particular item. This value will only override the value from the grid if larger'minWidth':0,//  The minimum width of a particular item. This value will override the value from the grid, as well as the minimum columns if the resulting size is larger'minHeight':0,//  The minimum height of a particular item. This value will override the value from the grid, as well as the minimum rows if the resulting size is larger}

Event Handling

onDragStart(item)//  When an item starts being dragged. Returns reference to corresponding NgGridItemonDrag(item)//  When an item moves while dragging. Returns reference to corresponding NgGridItemonDragStop(item)//  When an item stops being dragged. Returns reference to corresponding NgGridItemonResizeStart(item)//  When an item starts being resized. Returns reference to corresponding NgGridItemonResize(item)//  When an item is resized. Returns reference to corresponding NgGridItemonResizeStop(item)//  When an item stops being resized. Returns reference to corresponding NgGridItemonItemChange(items)//  When any item stops being dragged or resized. Returns an array of NgGridItemEvents in the order in which each item was added to the grid

onDragStart()//  When the item starts being dragged.onDrag()//  When the item moves while dragging.onDragStop()//  When the item stops being dragged.onDragAny()//  When the item starts/stops/is being dragged.onResizeStart()//  When the item starts being resized.onResize()//  When the item is resized.onResizeStop()//  When the item stops being resized.onResizeAny()//  When the item starts/stops/is being resized.onChangeStart()//  When the item starts being dragged or resized.onChange()//  When the item is dragged or resized.onChangeStop()//  When the item stops being dragged or resized.onChangeAny()//  When the item starts/stops/is being dragged or resized.onItemChange()//  When either the item's grid size or position is changed.

interfaceNgGridItemEvent{payload:any,//  The item's optional custom payload (string/number/object) to be used to identify the item for serializationcol:number,//  The item's column position within the gridrow:number,//  The item's row position within the gridsizex:number,//  The item's column size within the gridsizey:number,//  The item's row size within the gridwidth:number,//  The item's raw width valueheight:number,//  The item's raw height valueleft:number,//  The item's offset left valuetop:number//  The item's offset top value}

Styling

.grid {position: relative;}.grid-item {position: absolute;}.grid-item.moving {z-index: z-index+1;}.placeholder {position: absolute;}

Example

<div[ngGrid]="{'resizeable': false, 'margins': [5, 10]}"><div*ngFor="let box of boxes"[(ngGridItem)]="box.config"><divclass="title">{{box.title}}</div><p>{{box.text}}</p></div></div>

import{NgGridModule}from'angular2-grid';

@NgModule({    ...,imports:[        ...,NgGridModule,        ...],    ...})

map: {    'angular2-grid': 'node_modules/angular2-grid/dist/js'}packages: {    'angular2-grid': { main: 'main.js',  defaultExtension: 'js' }}