Angular 2 Grid System

Angular 2 Grid System provides an easy to use grid system to build layouts of different sizes and forms.

angular-2-grid-system-example
angular 2 grid system example

 

 

Create dynamic angular 2 grids, with drag and drop support and many other features.

 

Download our Angular 2 Grid System Component from here: (Compatible Angular 2 final release) ready to run example.

With a step by step on how to run the demo.

Let’s build our example:

extract from grid-demo.component.ts:

 

...

let template = require('./grid-demo.component.html');

@Component({
    selector: 'grid-app',
    template: template,
     styleUrls: ['./grid-demo.component.css']
})
export class GridDemoComponent {



private boxes: Array<Box> = [];
	private rgb: string = '#000000';
	private curNum: number = 8;
	private gridConfig: NgGridConfig = <NgGridConfig>{
		'margins': [10],
		'draggable': true,
		'resizable': true,
		'max_cols': 0,
		'max_rows': 0,
		'visible_cols': 0,
		'visible_rows': 0,
		'min_cols': 2,
		'min_rows': 2,
		'col_width': 3,
		'row_height': 3,
		'cascade': 'up',
		'min_width': 60,
		'min_height': 70,
		'fix_to_grid': false,
		'auto_style': true,
		'auto_resize': false,
		'maintain_ratio': false,
		'prefer_new': false,
		'zoom_on_drag': false,
		'limit_to_screen': true
	};
	private curItemCheck: number = 0;
	private itemPositions: Array<any> = [];
	
	constructor() {
		for (var i = 0; i < 4; i++) { const conf = this._generateDefaultItemConfig(); conf.payload = 1 + i; this.boxes[i] = { id: i + 1, config: conf }; } } get ratioDisabled(): boolean { return (this.gridConfig.max_rows > 0 && this.gridConfig.visible_cols > 0) ||
			(this.gridConfig.max_cols > 0 && this.gridConfig.visible_rows > 0) ||
			(this.gridConfig.visible_cols > 0 && this.gridConfig.visible_rows > 0);
	}
	
	...
 }
}

and here an example from html template :


<div [ngGrid]="gridConfig">

<div [ngGridItem]="{'dragHandle': '.handle', 'maxCols': 2, 'maxRows': 3}" (itemChange)="updateItem(i, $event)" (resize)="onResize(i, $event)" (drag)="onDrag(i, $event)">

<div class="handle">

<div class="childHandle">
				<span>Child handle</span>
			</div>

		</div>

		Max Cols - 2
		Max Rows - 3
	</div>


<div [ngGridItem]="{'dragHandle': '.handle', 'minCols': 2, 'minRows': 3}" (itemChange)="updateItem(i, $event)" (resize)="onResize(i, $event)" (drag)="onDrag(i, $event)">

<div class="handle">

<div class="childHandle">
				<span>Child handle</span>
			</div>

		</div>

		Min Cols - 2
		Min Rows - 3
	</div>

</div>

Our component example uses typescript as programming language.

all files from here: angular 2 grid system