jQWidgets Themes with Angular CLI

This tutorial will show you how to apply Themes on Angular Components by jQWidgets with Angular CLI.

First we will need to have an Angular CLI project set up. For that we will use the Create jQWidgets Angular App.

When the set up is done, open the angular.json file.

In the styles section add the css files of the themes that you would like to use.

For this tutorial we will use the dark theme, so we will add:

"node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.dark.css"

It should look like this:

Then we will need to add a theme property, passing the theme's name as a string to the component where we want to apply it.

In our case:

app.component.ts

<jqxGrid [theme]="'dark'"
  [width]="850" [source]="dataAdapter" [columns]="columns"
  [pageable]="true" [autoheight]="true" [sortable]="true"
  [altrows]="true" [enabletooltips]="true" [editable]="true"
  [selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
</jqxGrid>

After that you need to re-compile the application by running npm start again.

This should be the result: