Angular 2 Grid Example

angular 2 grid is a native angular 2 component used to display different kinds of grids.

angular 2 grid example 1
angular 2 grid example 1

live example at the end of the article

try angular 2 grid example
try angular 2 grid example

Let’s develop our first grid example :

angular 2 grid example 2
angular 2 grid example 2

Next step is the component setup.

What are the grids we can develop with angular 2 grid library?

You can develop : basic table or grid, advanced grid or table , Sheet , Personal Grid , Finance Grid , Science Table , Scores Tables.

angular 2 grid example 3
angular 2 grid example 3

 

angular 2 grid setup
angular 2 grid setup
  • Install the angular 2 grid component with this command:
npm install ng2-handsontable –save
bower install handsontable
  • Include the angular 2 grid libraries
<link rel="stylesheet" media="screen" href="bower_components/handsontable/dist/handsontable.full.css">
<script src="bower_components/handsontable/dist/handsontable.full.js"></script>

Let’s write the first angular 2 grid example:

angular 2 grid example
angular 2 grid example
  • HTML File:

<hot-table [data]="data"
(after-change)="afterChange($event)"
(after-on-cell-mouse-down)="afterOnCellMouseDown($event)"
[col-headers]="colHeaders"
[columns]="columns"
[options]="options"
[col-widths]="colWidths">
</hot-table>

  • Typescript File

/// <reference path="../../../tsd.d.ts" />

import {
Component, View,
CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
} from 'angular2/angular2';

import {handsontable} from '../../../components/index';
import {genData} from './data';

declare var Handsontable:Function;

@Component({
selector: 'angular-2-grid',
})
@View({
template: 'angular-2-grid.html'
directives: [handsontable, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class BasicDemo {
private data:Array<any> = genData(10);
private colHeaders:Array<string> = ['ID', 'FirstName', 'LastName', 'The Address',
'Favorite Foods', 'Price', 'IsActive'];
private columns:Array<any> = [
{
data: 'id'
},
{
data: 'name.first',
renderer: 'text',
readOnly: true
},
{
data: 'name.last',
readOnly: true
},
{
data: 'address'
},
{
data: 'product.description',
source: 'product.options',
optionField: 'description',
type: 'autocomplete',
strict: false,
visibleRows: 4
},
{
data: 'price',
type: 'numeric',
format: '$ 0,0.00'
},
{
data: 'isActive',
type: 'checkbox',
checkedTemplate: 'Yes',
uncheckedTemplate: 'No'
}
];
private colWidths:Array<number> = [null, null, null, null, null, null, 30];
private options:any = {
stretchH: 'all',
columnSorting: true,
contextMenu: [
'row_above', 'row_below', 'remove_row'
]
};

private afterChange(e:any) {
console.log(e);
}

private afterOnCellMouseDown(e:any) {
console.log(e);
}
}

our component example uses typescript as programming language.

all files from here: angular 2 grid

angular 2 grid