Angular CLI & jqwidgets-ng

jqwidgets-ng is an Angular framework package bundled using the Angular Package Format(APF). The format uses a distinct file layout and metadata configuration that enables a package to work seamlessly under most common scenarios where Angular is used, and makes it compatible with the tooling offered by the Angular team and the community itself.

This tutorial will show you how to use Angular CLI along with jqwidgets-ng.
Please, follow the instructions below:

I. Install the Angular CLI globally, so we can have it's commands available:

npm install -g @angular/cli

II. Create an Angular CLI application:

ng new my-app

III. Navigate to the application:

cd my-app

IV. Install the jqwidgets-ng dependency:

npm install jqwidgets-ng

V. Open the angular.json file and inside the styles property add this line:

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

It should look like this:

VI. Navigate to src/app and edit the files:

app.module.ts


app.component.ts


app.component.html


VII. Run the Angular CLI development server:

ng serve

VIII. Navigate to localhost:4200 and see the result: