DevExtreme React - Add DevExtreme to an ASP.NET Core Angular Application
This article describes how to create an ASP.NET Core Angular application and add a DevExtreme widget to it. You need Visual Studio 2017 version 15.7 or later and .NET Core 2.1 SDK to do this.
Open Visual Studio 2017 and create a new ASP.NET Core Angular application using the ASP.NET Core Web Application template.
Open the ClientApp\package.json file and add the devextreme and devextreme-angular packages to the
dependencies
section:"dependencies": { ... "devextreme": "18.1.18", "devextreme-angular": "18.1.18" }
Save the changes and wait until Visual Studio has downloaded the dependencies.
Open the ClientApp\.angular-cli.json file and register the required .css files in it:
{ "apps": [ { // ... "styles": [ "../node_modules/devextreme/dist/css/dx.common.css", "../node_modules/devextreme/dist/css/dx.light.css", // ... ] } ] }
Open the ClientApp\src\app\app.module.ts file and import modules that contain individual DevExtreme widgets or a module containing all the DevExtreme widgets and related utilities:
// Imports all the DevExtreme widgets import { DevExtremeModule } from "devextreme-angular"; // Imports an individual widget // import { DxDataGridModule } from "devextreme-angular"; @NgModule({ ... imports: [ ... DevExtremeModule, // DxDataGridModule, ... ] })
Open the ClientApp\src\app\fetch-data\fetch-data.component.html file and replace the table in it with the following code. This code creates the DevExtreme DataGrid widget and binds it to sample data the
FetchDataComponent
provides:<dx-data-grid [dataSource]="forecasts"></dx-data-grid>
Run the application and when it is loaded, navigate to the Fetch data page to view the DataGrid.
Refer to DevExtreme-Angular on GitHub for more information on working with DevExtreme controls in Angular.
If you have technical questions, please create a support ticket in the DevExpress Support Center.