Quick start
NOTE these instructions are for the latest Angular-Slickgrid v7.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)
Important note about ngx-translate
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
will still be installed behind the scene to make DI (dependency injection) not complaining when using @Optional()
but it should be removed by the build 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
angular.json
and tsconfig.app.json
filesprevious Angular versions were using .angular-cli.json
.angular-cli.json
Then modify your angular.json
file with the following Styles and Scripts:
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.
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:
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.
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
comment over the @NgModule
as shown below:
5. Install/Setup ngx-translate
for Localization (optional)
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.)
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.Using Localization with I18N, that is when you want to use multiple locales dynamically.
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 define which Flatpickr Locale to import, for more info on how to do that then take a look at the Flatpickr Localization Docs
6. Create a basic grid
And finally, you are now ready to use it in your project, for example let's create both html/ts files for a grid-basic.component
example, configure the Column Definitions, Grid Options and pass a Dataset to the grid:
define Angular-Slickgrid in your View
7. Explore the Documentation
The last step is really to explore all the pages that are available in this documentation website, 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, Slickgrid-Universal - Grid Options interfaceGrid Menu ... and much more, just explorer the Documentation through the table of content (on your left)
8. How to load data with HttpClient
?
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.
Bootstrap 4 demo / examples repo (using
ngx-translate
)Bootstrap 4 - examples repo (single Locale, without using
ngx-translate
)
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 Docs - SlickGrid & DataView objects
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
(for Angular 8 to 15) 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):
You should also add Angular-Slickgrid
and any dependency that Angular shows a CommonJS warning, add them as allowed CommonJS dependencies to your angular.json
file to silence these warnings.
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
Steps to fix it
npm install stream-browserify
Add a path mapping in
tsconfig.app.json
:
Add
stream
(and any other CJS deps) toallowedCommonJsDependencies
inangular.json
:
... and that should cover it, now let's code!
Last updated