Integration of pqgrid with Angular

pqgrid can be used in Angular applications like any other component. To include pqgrid, configuration options are passed to the grid as a single mutable object.

Reactive options

pqgrid has its own reactive workhorse that enables it to perform two way binding. e.g., if configuration options object is mutated, pqgrid updates itself and vice versa.
Reactive system of pqgrid is turned on simply by setting reactive option to true. For more details, please see the reactive option.

Include dependencies:

pqgrid is installed though npm or yarn.

npm i pqgrid

pqgrid has peer dependencies which are indicated when pgrid is installed. 

        jquery
        jquery-ui-pack
        @types/jquery
        @types/jqueryui
        jszip

pqgrid exports pq module which is imported into your application by

import pq from 'pqgrid';

At least one localization is mandatory which is imported by

import 'pqgrid/localize/pq-localize-en.js';

All css files for pqgrid and dependencies can be included either in styles.css using @import or specified in angular.json > build > options > styles section. 

"styles": [
    "src/styles.css",
    "node_modules/jquery-ui-pack/jquery-ui.css",
    "node_modules/jquery-ui-pack/jquery-ui.structure.css",
    "node_modules/jquery-ui-pack/jquery-ui.theme.css",
    "node_modules/pqgrid/pqgrid.min.css",
    "node_modules/pqgrid/pqgrid.ui.min.css",
    "node_modules/pqgrid/themes/steelblue/pqgrid.css"
],

Change locale

Purpose of this example is to demonstrate how to pass initial configuration options object to pqgrid and mutate it later.