Angular Grid Component


 For the purposes of this tutorial, we are going to scaffold an Angular app with angular CLI.
FancyGrid and its Angular wrapper are distributed as NPM packages, which should work with any common Angular project module bundler setup.
Let's follow the Angular CLI instructions - run the following in your terminal:

Add FancyGrid to Your Project


npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

If everything goes well, ng serve has started the web server. You can open your app at localhost:4200.

As a next step, let's add the FancyGrid NPM packages.
Run the following command in my-app (you may need a new instance of the terminal):


npm install --save fancygrid fancy-grid-angular

 After a few seconds of waiting, you should be good to go.
Let's get to the actual coding!
As a first step, let's add the FancyGrid Angular module to our app module (src/app.module.ts):


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FancyGridModule } from 'fancy-grid-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FancyGridModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

 Next, let's declare the basic grid configuration. Edit src/app.component.ts:


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My App';
  gridConfig: object;
  constructor () {
    const data = [
      {name: 'Ted', surname: 'Smith', company: 'Electrical Systems', age: 30},
      {name: 'Ed', surname: 'Johnson', company: 'Energy and Oil', age: 35},
      {name: 'Sam', surname: 'Williams',  company: 'Airbus', age: 38},
      {name: 'Alexander', surname: 'Brown', company: 'Renault', age: 24},
      {name: 'Nicholas', surname: 'Miller', company: 'Adobe', age: 33},
      {name: 'Andrew', surname: 'Thompson', company: 'Google', age: 28},
      {name: 'Ryan', surname: 'Walker', company: 'Siemens', age: 39},
      {name: 'John', surname: 'Scott', company: 'Cargo', age: 45},
      {name: 'James', surname: 'Phillips', company: 'Pro bugs', age: 30},
      {name: 'Brian', surname: 'Edwards', company: 'IT Consultant', age: 23},
      {name: 'Jack', surname: 'Richardson', company: 'Europe IT', age: 24},
      {name: 'Alex', surname: 'Howard', company: 'Cisco', age: 27},
      {name: 'Carlos', surname: 'Wood', company: 'HP', age: 36},
      {name: 'Adrian', surname: 'Russell', company: 'Micro Systems', age: 31},
      {name: 'Jeremy', surname: 'Hamilton', company: 'Big Machines', age: 30},
      {name: 'Ivan', surname: 'Woods', company: '', age: 24},
      {name: 'Peter', surname: 'West', company: 'Adobe', age: 26},
      {name: 'Scott', surname: 'Simpson', company: 'IBM', age: 29},
      {name: 'Lorenzo', surname: 'Tucker', company: 'Intel', age: 29},
      {name: 'Randy', surname: 'Grant', company: 'Bridges', age: 30},
      {name: 'Arthur', surname: 'Gardner', company: 'Google', age: 31},
      {name: 'Orlando', surname: 'Ruiz', company: 'Apple', age: 32}
    ];

    this.gridConfig = {
      width: 450,
      height: 400,
      selModel: 'rows',
      trackOver: true,
      theme: 'gray',
      data: data,
      defaults: {
        type: 'string',
        sortable: true,
        resizable: true,
        width: 100
      },
      columns: [{
        type: 'select'
      },{
        index: 'company',
        title: 'Company'
      }, {
        index: 'name',
        title: 'Name'
      }, {
        index: 'surname',
        title: 'Sur Name'
      }, {
        index: 'age',
        title: 'Age',
        width: 50,
        type: 'number'
      }]
    };
  }
}

 The code above contains grid config that define in property gridConfig.
The name of property is not principal, you can change it.
We will you use this property in app.component.html.

Finally, let's add the component definition to our template. Edit app/app.component.html and remove the scaffold code:


<fancy-grid-angular [config]="gridConfig"></fancy-grid-angular>

If everything works as expected, you should see a grid.

Events and API

To manipulate grid it requires to get link on it.
Read more about method here Methods.
To use events it requires to set param events.
So let us try.


constructor () {
  ...
  this.gridConfig = {
    title: 'Title',
    ...
    events: this.getEvents(),
}

getEvents() {
  return [{
    init: this.onGridInit,
	scope: this
  }];
}

onGridInit(grid) {
  this.grid = grid;
  
  grid.setTitle('New Title');
}

In the code above we added title to grid config and events.
In events we defined only one event init with scope.
If we would not set scope than in event handler onGridInit property this will be link to our grid
instead of our app.
And finally in handler onGridInit we added link on grid to our app and run grid method setTitle.

Getting link on grid

Very often it requires to get link grid to use methods.
If direct link on grid is absent than you can define id to config and get link over id.
For that it requires to import object Fancy and set id for widget.


import Fancy from 'fancygrid';
..

constructor() {
  this.gridConfig = {
    id: 'myGrid',
  ..
//Somewhere in the code.
const grid = Fancy.getWidget('myGrid');
grid.setTitle('New Title');
`