I’m a big fan of the Angular 2 framework, DevExtreme controls and most of all, Angular CLI. Luckily the folks at DevExpress (makers of DevExtreme) have been nice enough to provide Angular 2 directives for their controls in an NPM package called devextreme-angular2. Unfortunately, all of the existing code samples provided by DevExpress are based on SystemJs and the newer versions of Angular CLI use WebPack.
All the code in this demonstration is available on my personal GitHub repository https://github.com/pcalchi/AngularCli-DevExpress-Demo.
Getting Started
If you don’t already have an Angular CLI project go ahead and create one now. Instructions on how to do so can be found on their GitHub project page. Once the project is created go ahead and install the devextreme-angular2 npm package by typing at a command prompt in the same directory:
npm install devextreme-angular2 --save
Angular CLI 3rd Party Library Installation
Next, you’ll need to introduce a couple of assets (dependencies) into the Angular CLI project file (angular-cli.json) so that it’s part of the project output. Under styles and scripts add the following (remember order matters):
Recognizing DevExtreme Directives
For the last bit of plumbing open your module file (app.module.ts) and import the DevExtremeModule and add it to the @NgModule decorator. You need to do this so that angular will recognize the DevExtreme directives.
The Fun Begins
Now you’re ready to start coding with the DevExtreme components. For the purposes of this demo, I decided to copy a sample that the DevExpress team provided, specifically the one for the DxChart. Please keep in mind that I would never deliver code like this, but for the purposes of this demo, I’m keeping it simple. Open up the App.Components.ts file and add an additional class called Orange along with two properties to the AppComponent class. These two properties will be bound to our DxChart component later in the markup.
HTML
For the markup, edit app.component.html file and add the dx-chart element and set the appropriate bindings to the properties you’ve just created.
CSS
Lastly, you need to add some CSS to have the chart render correctly. Open up the app.component.css and add the following class.
Wah-Lah!
Now you can run the application by typing:
ng serve
Open up your favorite browser and navigate to http://localhost:4200 (this is the typical setup for Angular CLI projects) and you should see:
Isaac Martinez 