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');

Production

FancyGrid consists of modules. It helps much to keep bundle size small.
But for production it requires to execute extra complex steps.

If you installed FancyGrid over npm and uses ES6/TypeScript than this section is for you.
By default FancyGrid includes core small module that auto-detects which modules will be used.
Than modules will be loaded from path that was provided in Fancy.MODULESDIR.
By default Fancy.MODULESDIR is equal to https://cdn.fancygrid.com/modules/ You can study about modules by this link Modules.

JavaScript Modules

You would need to get list of all modules that are used. For that open run open Web Console in browser and run this.
Fancy.getModulesList();
You would get something like that: ["paging", "server-data", "sort", "grouping", "filter", "tree", "dom", "ajax", "menu", "form", "grid"]. Now, open src/app/app.modules.ts and import modules.

import FancyGridVue from 'fancy-grid-vue';
import Fancy from 'fancygrid';
import 'fancygrid/client/modules/paging.min';
import 'fancygrid/client/modules/server-data.min';
import 'fancygrid/client/modules/sort.min';
import 'fancygrid/client/modules/grouping.min';
import 'fancygrid/client/modules/filter.min';
import 'fancygrid/client/modules/dom.min';
import 'fancygrid/client/modules/menu.min';
import 'fancygrid/client/modules/form.min';
import 'fancygrid/client/modules/grid.min';

If you would need to debug the code, than remove .min from modules.

i18n

On case you use localization that you would need to include lang module.
Add this line.

import 'fancygrid/client/modules/i18n/de';

CSS file

The next thing to do is including css file.
For that after including modules add this line.

Fancy.stylesLoaded = true;

It is stoping FancyGrid from loading styles file by self.

Than open src/styles.css and add.

@import "../node_modules/fancygrid/client/fancy.min.css";

That's it.