HOWTO Step by Step

1. Install NPM Package

Install the Angular-Slickgrid, Slickgrid, Bootstrap 3.x, Font-Awesome and jQuery 3.x NPM packages with

npm install --save angular-slickgrid jquery bootstrap font-awesome
# or with yarn add

2. Modify the .angular-cli.json file

Then modify your .angular-cli.json file with the following Styles and Scripts:

Note: The Scripts section includes every single controls/plugins, however if you wish to exclude some of them since you might never use some functionalities then just don't include them (for example if you never want to use the column picker, then just delete the slick.columnpicker.js file from the Scripts list).

Note 2: Flatpickr is used by the date inline editor. If you are not planning to use it, you can skip including flatpickr.css in your styles.

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/flatpickr/dist/flatpickr.css",
    "styles.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/slickgrid/lib/jquery-ui-1.11.3.js",
    "../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js"
],

3. CSS / SASS Styles

Load the default Bootstrap theme style and/or customize it to your taste (customization requires SASS)

CSS

Default compiled css (if you use the plain Bootstrap Theme CSS, you could simply add it to your .angular-cli.json file and be done with it).

Note: If you are also using Bootstrap-SASS, then there is no need to include the bootstrap.css in the styles: [] section.

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css",
    "../node_modules/angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css"
],

SASS (scss)

You could also compile the SASS files with your own customization, for that simply take any of the _variables.scss (without the !default flag) variable file and make sure to import the Bootstrap Theme afterward. For example, you could modify your style.scss with the following changes:

/* for example, let's change the mouse hover color */
$cell-odd-background-color: lightyellow;
$row-mouse-hover-color: lightgreen;

/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
@import '../node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';

4. Include it in your App Module

Include AngularSlickgridModule in your App Module (app.module.ts)

import { AngularSlickgridModule } from 'angular-slickgrid';

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

And finally use it your code, for example let's create a grid-basic.component.html example.

<div class="container">
  <angular-slickgrid gridId="grid1"
            [columnDefinitions]="columnDefinitions"
            [gridOptions]="gridOptions"
            [dataset]="dataset">
  </angular-slickgrid>
</div>

5. Install/Setup ngx-translate for Localization

As of version 0.7.x, ngx-translate is now a dependency and is required to be installed and setup. Please read the Uncyclo - Localization.

But I'm now using any locales, what then?

You still need to do the minimal setup, which is described in the Uncyclo - minimal setup

6. Create a basic grid

and then configure the Column Definitions, Grid Options and pass a Dataset to the grid:

import { Component, OnInit } from '@angular/core';
import { Column, GridOption } from 'angular-slickgrid';

@Component({
  templateUrl: './grid-basic.component.html'
})
export class GridBasicComponent implements OnInit {
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset: any[];

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
      { id: 'start', name: 'Start', field: 'start' },
      { id: 'finish', name: 'Finish', field: 'finish' },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions = {
      enableAutoResize: true,       // true by default
      enableCellNavigation: true
    };

    // fill the dataset with your data
    // VERY IMPORTANT, Angular-Slickgrid uses Slickgrid DataView which REQUIRES a unique "id" and it has to be lowercase "id" and be part of the dataset
    this.dataset = [];

    // for demo purpose, let's mock a 1000 lines of data
    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 28));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i, // again VERY IMPORTANT to fill the "id" with unique values
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }
}

7. Explore the Uncyclo page content

The last step is really to explore all the pages that are available in this Uncyclo, all the documentation will be place in here and so you should visit it often. For example a good starter is to look at the following

• all the Grid Options you can take a look at, Uncyclo - Grid Options
• Formatters

... and more to come