Angular

How To Add DevExtreme In Angular Application

Hello Friends, In this article, we will learn how to add DexExtreme In an angular application and how to use DexExtreme DataGrid in angular.

To start this article, you need an Angular 7+ application created using the Angular CLI.

First, we need to install devextreme in our angular project

npm install devextreme@20.2 devextreme-angular@20.2 --save --save-exact

After you run the command, We Configure Stylesheets Open the angular.json file and reference dx.common.css and a predefined theme stylesheet (dx.light.css in the code below).

{
  "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"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

Then, go to the src folder, open the index.html file, and add the dx-viewport class in the <body> tag. This ensures theme colors applied to all pages.

<html>
    <head>
        <!-- ... -->
    </head>
    <body class="dx-viewport">
        <app-root></app-root>
    </body>
</html>

Then, go to the NgModule and import the required DevExtreme modules.

// ...
import { DxDataGridModule } from 'devextreme-angular';
 
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
export class AppModule { }

Now, add DataGrid in the app.component.html page.

<dx-data-grid 
    id="gridContainer"
    [dataSource]="dataSource"
    [showBorders]="true">    
    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager 
        [showPageSizeSelector]="true"
        [allowedPageSizes]="[10, 20, 50, 100]"
        [showInfo]="true">
    </dxo-pager>
    
    <dxi-column dataField="companyName"></dxi-column>
    <dxi-column dataField="city"></dxi-column>
    <dxi-column dataField="state"></dxi-column>
    <dxi-column dataField="phone"></dxi-column>
    <dxi-column dataField="fax"></dxi-column>
</dx-data-grid>

We are filled data in the grid using API, put the below code in the app.component.ts file.

export class AppComponent {

  dataSource: any;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit(): void {
    this.http
      .get<any>('/api/home')
      .pipe()
      .subscribe(data => {
        this.dataSource = data;
      });
  }
}

Now run the application and see the result look like below

I hope this article helps you and you will like it.

Jignesh Patel

Jignesh Patel is a Senior Full Stack .Net Developer has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET MVC, AngularJS, Angular, Nodejs, Web API, EPPlus, SQL, Entity Framework, JavaScript, Azure Web Jobs, Microsoft Graph API, etc.