FancyGrid

Angular Grid Component for FancyGrid
Read more here:
https://fancygrid.com/docs/getting-started/angular

Install

angular CLI

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

If everything goes well, ng serve has started the web server. You can open your app at http://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):

FancyGrid

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):

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:

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 defined 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.

Support

If you need any assistance or would like to report any bugs found in FancyGrid, please contact us at [email protected]