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 slickgrid jquery bootstrap font-awesome # or yarn add

2. Modify the .angular-cli.json file

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

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.scss"
],
"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",
    "../node_modules/slickgrid/slick.core.js",
    "../node_modules/slickgrid/slick.dataview.js",
    "../node_modules/slickgrid/slick.grid.js",
    "../node_modules/slickgrid/slick.dataview.js",
    "../node_modules/slickgrid/plugins/slick.autotooltips.js",
    "../node_modules/slickgrid/plugins/slick.cellrangedecorator.js",
    "../node_modules/slickgrid/plugins/slick.cellrangeselector.js",
    "../node_modules/slickgrid/plugins/slick.cellcopymanager.js",
    "../node_modules/slickgrid/plugins/slick.cellselectionmodel.js",
    "../node_modules/slickgrid/plugins/slick.checkboxselectcolumn.js",
    "../node_modules/slickgrid/plugins/slick.rowselectionmodel.js",
    "../node_modules/slickgrid/controls/slick.columnpicker.js"
]

3. Include it in your App Module

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

import { AngularSlickgridModule } from 'angular-slickgrid/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>

4. 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)

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.scss",
    "../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;
$selected-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';

5. 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/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,
      sortable: 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)
      };
    }
  }
}