0.3.21 • Published 7 years ago
ng2-grid-component v0.3.21
#Angular 2 Grid Component A grid component for angular 2 application. demo
Installation
1 npm install --save ng2-grid-component
2 Import in @NgModule
import { GridModule } from 'ng2-grid-component';
@NgModule({
imports: [ GridModule ]....
3 Use in your component
import { NgGrid } from 'ng2-grid-component';
@Component({
selector: 'my-app',
template: '<grid></grid>'
})
export class AppComponent {
@ViewChild(NgGrid) grid : NgGrid;
ngAfterViewInit(){
var widget = this.grid.addWidget();
}
}
4.1 Add Custom component to @NgModule
import { CustomComponent } from './custom/custom.component';
@NgModule({
...
declarations: [CustomComponent ],
entryComponents: [ CustomComponent ]...
})
4.2 Add Custom component to widget
import { CustomComponent } from './custom/custom.component';
var widget = this.grid.addWidget();
widget.innerComponent = CustomComponent; //or
widget.innerHTML = "<div> Hello I'm inside the widget </div>";
Systemjs Users
map: {
'ng2-grid-component':'npm:ng2-grid-component/dist/bundles/ng2-grid.umd.min.js'....
}
Config
{
'maxCol':5,
'maxRow':5,
'theme':'light',
'colWidth':250,
'rowHeight':180,
'marginLeft':10,
'marginTop':10,
'marginRight':10,
'marginBottom':10,
'minWidth':1,
'minHeight':1,
'maxWidth':-1,
'maxHeight':-1
}
Example
<grid [customConfig]="customConfig"></grid> .....
public customConfig = {
'maxWidth':5,
'maxHeight':5,
'minWidth':2,
'minHeight':2,
'theme':'sky'
};
Event Handling
grid emits these events
@Output() public onDragStart: EventEmitter<NgWidget> = new EventEmitter<NgWidget>();
@Output() public onDrag: EventEmitter<NgWidget> = new EventEmitter<NgWidget>();
@Output() public onDragStop: EventEmitter<NgWidget> = new EventEmitter<NgWidget>();
@Output() public onResizeStart: EventEmitter<NgWidget> = new EventEmitter<NgWidget>();
@Output() public onResize: EventEmitter<NgWidget> = new EventEmitter<NgWidget>();
@Output() public onResizeStop: EventEmitter<NgWidget> = new EventEmitter<NgWidget>();
0.3.21
7 years ago
0.3.2
7 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.9
7 years ago
0.2.82
7 years ago
0.2.81
7 years ago
0.2.78
7 years ago
0.2.77
7 years ago
0.2.76
7 years ago
0.2.75
7 years ago
0.2.74
7 years ago
0.2.73
7 years ago
0.2.72
7 years ago
0.2.71
7 years ago
0.2.7
7 years ago
0.2.6
7 years ago
0.2.5
7 years ago
0.2.4
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.21
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.2
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.1
7 years ago