To start this tutorial, you need an Angular 5+ application created using the Angular CLI. Refer to the Angular CLI documentation for information on how to create such an application. You can also create an Angular application with DevExtreme already added to it.
A key installation
You can install and configure DevExtreme associated with dependence npx DevExtreme CLI command npx is part of:
npx -p devextreme-cli devextreme add devextreme-angular
note
npx valid on npm v5.2 and later. If you are using an earlier version, upgrade or install npm global DevExtreme CLI, and then run the command:
npm i -g devextreme-cli devextreme add devextreme-angular
After you run the command, you can skip the following article directly into DevExtreme module.
If the command is not available for some reason, the following instructions can be used to manually configure.
Installation DevExtreme
Installation devextreme devextreme-angular with a npm package:
npm install [email protected] [email protected] --save --save-exact
note
Because DevExtreme not using Semantic version management, we recommend using the specified version of DevExtreme, prevent unnecessary upgrades. Our version management system, the first and middle number represents the major version, including behavioral changes.
Configure style sheet
Open angular.json, introduced dx.common.css predefined themes and style sheets (dx.light.css).
angular.json
{
"projects": {
"ProjectName": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"src/styles.css"
],
...
},
...
},
...
}
},
...
},
...
}
For previous version 6 Angular CLI, to modify the angular-cli.json follows:
angular-cli.json
{
"apps": [{
"styles": [
...
"../node_modules/devextreme/dist/css/dx.common.css",
"../node_modules/devextreme/dist/css/dx.light.css",
"styles.css"
],
...
}],
...
}
note
Theme Styles do not need the SVG-based widget. If you refer to these styles, the widget application matching appearance.
Angular CLI 6+ rely on third-party registered
JSZip registration
If you want to use DataGrid widget, registered JSZip library tsconfig.json years. This widget uses the library at client exported Excel.
tsconfig.json
{
...
"compilerOptions": {
...
"paths": {
"jszip": [
"node_modules/jszip/dist/jszip.min.js"
]
}
}
}
Global registration
If you want to localize the language, you must install this package and devextreme-cldr-data extension:
npm install --save-dev devextreme-cldr-data globalize
Then Sign Language Packs and CLDR script scripts in tsconfig.json in ......
tsconfig.json
{
...
"compilerOptions": {
...
"paths": {
"globalize": [
"node_modules/globalize/dist/globalize"
],
"globalize/*": [
"node_modules/globalize/dist/globalize/*"
],
"cldr": [
"node_modules/cldrjs/dist/cldr"
],
"cldr/*": [
"node_modules/cldrjs/dist/cldr/*"
],
"jszip": [
"node_modules/jszip/dist/jszip.min.js"
]
}
}
}
...... then create typings.d.ts file in the src, Globalize, DevExtreme local news, and devextreme-cldr-data:
typings.d.ts
declare module 'globalize' {
const value: any;
export default value;
}
declare module 'devextreme/localization/messages/*' {
const value: any;
export default value;
}
declare module 'devextreme-cldr-data/*' {
const value: any;
export default value;
}
Use Angular CLI 5 or earlier version of the project, config.js configuration is as follows:
config.js
System.config({
// ...
paths: {
"npm:": "node_modules/"
},
map: {
// ...
"globalize": "npm:globalize/dist/globalize",
"cldr": "npm:cldrjs/dist/cldr",
"cldr-data": "npm:cldr-data",
"json": "npm:systemjs-plugin-json/json.js",
},
packages: {
app: {
// ...
"globalize": {
main: "../globalize.js",
defaultExtension: "js"
},
"cldr": {
main: "../cldr.js",
defaultExtension: "js"
}
}
}
});
Reference article uses the example of globalization.
Further, use of such lighter Intl localization program.
Import module DevExtreme
Find NgModule will use DevExtreme components, import needs DevExtreme module. Note that, if the application is configured to shake the tree, the module may be introduced devextreme-angular. Otherwise, you want a specific file to import them.
app.module.ts
// ...
import { DxButtonModule } from 'devextreme-angular';
// or if tree shaking is not configured
// import { DxButtonModule } from 'devextreme-angular/ui/button';
@NgModule({
imports: [
// ...
DxButtonModule
],
// ...
})
export class AppModule { }
You can now use DevExtreme components in your application:
app.component.htmlapp.component.ts
<dx-button
text="Click me"
(onClick)="helloWorld()">
</dx-button>
Run the application
Command to run the application as follows:
ng serve
Open http://localhost:4200/ to browse the application