Skip to content

HOWTO Step by Step

Jump to bottom Edit New page
Vildan Softic edited this page Sep 23, 2023 · 119 revisions

NOTE these instructions are for the latest Angular-Slickgrid v6.x and might be different for earlier versions of the lib.

1. Install NPM Package

Install the Angular-Slickgrid, and other external packages like Bootstrap and Font-Awesome (Bootstrap, Font-Awesome are optional, you can choose other lib if you wish)

npm install --save angular-slickgrid bootstrap font-awesome
npm install --save-dev @types/sortablejs @types/dompurify

Important note about ngx-translate

Now optional

ngx-translate is now optional as of version 2.10.0, see more info below at step 5 NOTE please note however that @ngx-translate it will still be installed behind the scene to make DI (dependency injection) not complaining when using @Optional() but it should be removed by the tree shaking process once you run a production build. See their version compatibility table below

Angular Version @ngx-translate/core
16+ 15.x
13+ (Ivy only) 14.x
10-13 13.x
8-9 12.x
7 11.x

2. Modify the angular.json and tsconfig.app.json files

previous Angular versions were using .angular-cli.json

Then modify your angular.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.

Note 3: Multiple-Select.js is a customized version of the original. Couple of small options were added to suit Angular-SlickGrid needs, which is why it points to angular-slickgrid/lib folder. This lib is required if you plan to use multipleSelect or singleSelect Filters (see Wiki - Filter).

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",    // optional, install when you use Bootstrap
    "node_modules/font-awesome/css/font-awesome.min.css",   // optional, install when you use Font-Awesome
    "node_modules/flatpickr/dist/flatpickr.css",
    "styles.css"
],
"scripts": [
    "node_modules/sortablejs/Sortable.min.js"                // REQUIRED in 5.x and higher
    "node_modules/bootstrap/dist/js/bootstrap.js",           // optional, install when you use Bootstrap
],

change tsconfig.app.json change to include jszip path (only required if you use Slickgrid-Universal Excel-Export package)

With the addition of Excel Export, you need to modify your tsconfig.app.json and add the following lines. If you forget to do this then your Angular Build will fail with a jszip error or Sortable due to default exports. This lib is a used by the Excel Export and it seems that the Build has some problems finding the correct path unless we tell it where to find it.

"compilerOptions": {
    // ...
    "allowSyntheticDefaultImports": true,
    "paths": {
      "jszip": ["../node_modules/jszip/dist/jszip.min.js"]
    }
  },

3. CSS / SASS Styles

Load the default Bootstrap theme style and/or customize it to your taste (either by using SASS or CSS variables)

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/@slickgrid-universal/common/dist/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 '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';

4. Include it in your App Module

Include AngularSlickgridModule in your App Module (app.module.ts) Note Make sure to add the forRoot since it will throw an error in the console when not provided.

import { AngularSlickgridModule } from 'angular-slickgrid';

@NgModule({
  declarations: [AppComponent],
  imports: [ AngularSlickgridModule.forRoot() ], // forRoot() is required, it won't work without it
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 7+

The new updated version of ng-packagr use strict metadata and you might get errors about Lambda not supported, to bypass this problem you can add the @dynamic over the @NgModule as shown below:

// @dynamic
@NgModule({
  ...
})

And finally you are now ready to 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 (optional)

If you don't want to use any Translate Service and use only 1 Locale then take a look at this demo

To provide locales other than English (default locale), you have 2 options that you can go with. If you only use English, there is nothing to do (you can still change some of the texts in the grid via option 1.)

  1. Using Custom Locale, that is when you use only 1 locale (other thank English)... this is a new feature starting from version 2.10.0 and up.
  2. Using Localization with I18N, that is when you want to use multiple locales dynamically.
  3. NOTE you still need to install @ngx-translate (since it is a peer dependency) but it should be removed after doing a production build since it's optional.
Translation Keys

Also note that every time you want to use a translation key, you simply have to use a property with the Key suffix. For example if you wish to have a column definition name with a translation, just use the nameKey: 'TRANSLATE_KEY' instead of name. Below is a list of keys that can be used in the lib

without Translate with Translate
name nameKey
label labelKey
title titleKey
columnGroup columnGroupKey
optionTitle optionTitleKey
Date Picker - Flatpickr Localization

If you use multiple locale, you will also need to import necessary Flatpickr Locale, for more info see this Flatpickr Localization Wiki

6. Create a basic grid

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

import { Column, GridOption } from 'angular-slickgrid';

export class GridBasicComponent {
  columnDefinitions: Column[] = [];
  gridOptions: GridOption = {};
  dataset: any[] = [];

  constructor() {
    this.prepareGrid();
  }

  prepareGrid() {
    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' },
    ];

    this.gridOptions = {
      enableAutoResize: true,
      enableSorting: true
    };

    // fill the dataset with your data
    this.dataset = [ /** ...your data... **/ ];
  }
}

7. Explore the Wiki page content

The last step is really to explore all the pages that are available in this Wiki, 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

8. How to load data with HttpClient?

You might notice that all demos are made with mocked dataset that are embedded in each examples, that is mainly for demo purposes, but you might be wondering how to connect this with an HttpClient? Easy... just replace the mocked data, assigned to the dataset property, by your HttpClient call and that's it. The dataset property can be changed at any time, which is why you can use local data and/or connect it to a Promise or an Observable with HttpClient (internally it's just a SETTER that refreshes the grid). See Example 24 for a demo showing how to load a JSON file with HttpClient.

9. Get Started

The best way to get started is to clone the Angular-Slickgrid-demos, it has multiple examples and it is also updated frequently since it is used for the GitHub Bootstrap 4 demo page. Angular-Slickgrid has 3 Bootstrap repos, you can see a demo of each ones below.

All Live Demo Examples have links to the actual code

Like to see the code to a particular Example? Just click on the "see code" that is available in every live examples.

10. Missing Features? (fear not)

What if Angular-Slickgrid is missing feature(s) versus the original SlickGrid? Fear not and directly use the SlickGrid and DataView objects that are expose from the start through Custom Events. For more info continue reading on Wiki - SlickGrid & DataView objects and Wiki - Grid & DataView Events

11. Build Errors/Warnings

You might also get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings, all you have to do is to add a file named ngcc.config.js in your project root (same location as the angular.json file) with the following content (you can also see this commit which fixes the Angular-Slickgrid-Demos prod build):

module.exports = {
  packages: {
    'angular-slickgrid': {
      ignorableDeepImportMatchers: [
        /slickgrid\//,
        /flatpickr/,
      ]
    },
  }
};

You should also add Angular-Slickgrid as an allowed CommonJS dependency to your angular.json file to silent the warnings.

"options": {
  "allowedCommonJsDependencies": ["angular-slickgrid", "autocompleter", "moment-mini", "dompurify"]
}

12. Angular 12 with WebPack 5 - how to fix polyfill error

Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.

The error you might get

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

Steps to fix it

  1. npm install stream-browserify
  2. Add a path mapping in tsconfig.app.json:
{
  ...
  "compilerOptions": {
    "paths": {
      "stream": [ "./node_modules/stream-browserify" ]
    },
  1. Add stream to allowedCommonJsDependencies in angular.json:
  "options": {
    "allowedCommonJsDependencies": [
      "angular-slickgrid", "stream"
    ],
Add a custom footer

Contents

Clone this wiki locally