DevExtreme

https://js.devexpress.com/Angular/Documentation/Guide
Admin
DevExtreme provides a comprehensive suite of UI components and tools for building interactive web...
Tokens:489,005
Snippets:6,045
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install DevExtreme CLI

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/DevExtreme_CLI

Install the DevExtreme CLI globally using npm.

```bash
npm i -g devextreme-cli
```

--------------------------------

### Percentage Formatting Examples

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Localization_and_Globalization/Value_Formatting

Shows how to apply percentage formatting to decimals, noting that starting a format string with '0' may result in the loss of leading digits.

```JavaScript
  * const smallNumber = 0.01234;
  *   * // Represent as a percentage and limit to two decimal digits
  * format: "#0.##%" // 1.23%
  *   * // Add a percent sign and limit to two decimal digits
  * format: "#0.##'%'" // 0.01%
```

--------------------------------

### Deploy the server

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Execute the start script to launch the server.

```bash
npm run start:server
```

--------------------------------

### Install server dependencies

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Install the required Dialogflow and server utility packages via npm.

```bash
npm i @google-cloud/dialogflow
npm i path browser-sync body-parser express
```

--------------------------------

### Basic Component Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/FileManager/Validation

Standard boilerplate for the application component.

```typescript
import { Component } from '@angular/core';
  * @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//...
}
```

--------------------------------

### Install pre-release DevExtreme via Yarn

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Distribution_Channels

Use these commands to install the latest pre-release version using Yarn for early testing.

```bash
yarn add devextreme@26.1-next --exact
yarn add devextreme-angular@26.1-next --exact
```

--------------------------------

### Configure package.json scripts

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Add the start script to your package.json to run the server.

```json
{
// ...
"scripts": {
"start:server": "node server.js"
}
}
```

--------------------------------

### Install DevExtreme Schematics

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/DevExtreme_CLI

Commands to install the required schematics package for the migration process.

```bash
// Project install
npm i devextreme-schematics --save-dev
// Global install
npm i -g devextreme-schematics
```

--------------------------------

### Install Azure Storage SDK

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Integration_Guides/Manage_Azure_Blob_Storage_with_DevExtreme_Components

Command to install the required Azure Storage Blobs NuGet package.

```bash
dotnet add Azure.Storage.Blobs --version 12.19.1
```

--------------------------------

### Install AWS SDK for .NET

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Integration_Guides/Manage_Amazon_S3_Storage_with_DevExtreme_Components

Command to install the required AWS S3 SDK package via NuGet.

```bash
dotnet add AWSSDK.S3 --version 3.7.308.2
```

--------------------------------

### Installing SpeechRecognition types

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/SpeechToText/Getting_Started_with_SpeechToText

Installs the required type definitions for SpeechRecognition support.

```bash
npm i -D @types/dom-speech-recognition
```

--------------------------------

### Install pre-release DevExtreme via npm

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Distribution_Channels

Use these commands to install the latest pre-release version for early testing of hotfixes and new features.

```bash
npm install devextreme@26.1-next --save --save-exact
npm install devextreme-angular@26.1-next --save --save-exact
```

--------------------------------

### Generate and Run a New Application

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Application_Template

Use the CLI to scaffold a new project and start the development server.

```bash
npx devextreme-cli new angular-app app-name
cd app-name
npm run start
```

--------------------------------

### Initialize Angular Project

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/First_Steps

Commands to install the Angular CLI and generate a new project.

```bash
npm install -g @angular/cli
ng new first-steps-project
```

--------------------------------

### Install OpenAI SDK

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Command to install the required OpenAI package via npm.

```bash
npm install openai
```

--------------------------------

### Import Grid Configuration Types

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Example of importing common grid configuration types.

```javascript
import { ColumnChooserSearchConfig } from "devextreme/common/grids";
```

--------------------------------

### Install DevExtreme Packages

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Rollup

Install the required DevExtreme and DevExtreme Angular packages with exact versioning.

```bash
npm install devextreme@26.1 devextreme-angular@26.1 --save --save-exact
```

--------------------------------

### Install CSS Bundling Plugin

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Rollup

Install the rollup-plugin-css-only package to enable CSS bundling.

```bash
npm install --save-dev rollup-plugin-css-only
```

--------------------------------

### Install DevExtreme via CLI

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application

Use the DevExtreme CLI to automatically install and configure DevExtreme in an Angular project.

```bash
npx -p devextreme-cli devextreme add devextreme-angular
```

--------------------------------

### HTML Test Environment Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/jQuery_Components/Components_Testing

Includes necessary QUnit, jQuery, Sinon, and DevExtreme libraries to prepare the test page.

```html
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Test DataGrid</title>
<head>
<script src="https://code.jquery.com/qunit/qunit-2.16.0.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/sinon@9/pkg/sinon.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/js/dx.all.js"></script>
<link
rel="stylesheet"
href="https://code.jquery.com/qunit/qunit-2.16.0.css"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/css/dx.light.css"
rel="stylesheet"
/>
</head>
<body>
<div id="dataGrid"></div>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
```

--------------------------------

### Install React Testing Library

Source: https://js.devexpress.com/Angular/Documentation/Guide/React_Components/Components_Testing

Use this command to add the React Testing Library to your project if it is not already included.

```bash
npm install --save-dev @testing-library/react
```

--------------------------------

### Run the Angular application

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application

Execute this command in the terminal to start the development server.

```bash
ng serve
```

--------------------------------

### Basic Angular Component Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Gantt/Filter_Data/Header_Filter

Standard boilerplate for an Angular component using the Gantt module.

```typescript
import { Component } from '@angular/core';
  * @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
  * export class AppComponent {
// ... 
}
```

--------------------------------

### AppComponent Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/FileUploader/How_To/Specify_a_Header_for_the_Request

Basic structure for the Angular component hosting the FileUploader.

```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() {
}
}
```

--------------------------------

### Console Output Example

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DropDownButton/Getting_Started_with_DropDownButton

Expected console output when selecting items in stateful mode.

```text
My profile was selected; Log out was deselected
Contacts was selected; My profile was deselected
```

--------------------------------

### Install Rollup Plugins

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Rollup

Install necessary Rollup plugins for node resolution, commonjs support, and aliasing.

```bash
npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-alias
```

--------------------------------

### Install DevExtreme ThemeBuilder Packages

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/DevExtreme_CLI

Commands to install the required DevExtreme and ThemeBuilder packages for projects using npm v7 or later.

```bash
npm i devextreme@26.1 --save --save-exact
npm i devextreme-themebuilder@26.1 --save-dev --save-exact
```

--------------------------------

### Initialize ExcelJS Workbook

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/PivotGrid/Export

Setup code to create a new ExcelJS workbook and worksheet instance.

```javascript
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Main sheet');
```

--------------------------------

### Create a Guid instance

Source: https://js.devexpress.com/Angular/Documentation/Guide/Data_Binding/Data_Source_Examples

Initialize a Guid with a specific string value or generate a new one by calling the constructor without arguments.

```JavaScript
var guid = new DevExpress.data.Guid("bd330029-8106-6d2d-5371-f27325155e99");
```

```JavaScript
var guid = new DevExpress.data.Guid();
```

--------------------------------

### Install stable DevExtreme via npm

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Distribution_Channels

Use these commands to install the latest stable version of DevExtreme packages with exact version pinning.

```bash
npm install devextreme@26.1 --save --save-exact
npm install devextreme-angular@26.1 --save --save-exact
```

--------------------------------

### Basic Scheduler Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler

Initial configuration for the Scheduler component in an Angular application.

```html
<dx-scheduler id="scheduler">
<!-- Configuration goes here -->
</dx-scheduler>
```

```typescript
import { Component } from '@angular/core';
import { DxSchedulerModule } from 'devextreme-angular/ui/scheduler';
  * @Component({
imports: [DxSchedulerModule],
// ...
})
export class AppComponent {
  * }
```

```css
#scheduler {
height: 600px;
}
```

--------------------------------

### Specify Widgets Argument

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/DevExtreme_CLI

Example syntax for the --widgets argument to include specific UI components.

```bash
--widgets=datagrid,treelist,selectbox
```

--------------------------------

### Run the Ionic Application

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Ionic

Execute this command in the terminal to start the development server for an Ionic-based Angular project.

```bash
ionic serve
```

--------------------------------

### Check Node.js Version

Source: https://js.devexpress.com/Angular/Documentation/Guide/Troubleshooting/DevExtreme_CLI_Issues/Create_a_New_Application

Command to verify the currently installed version of Node.js.

```bash
node -v
```

--------------------------------

### Configure Menu Adaptivity in Angular

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Menu/Getting_Started_with_Menu

Examples demonstrating the implementation of an adaptive Menu component with a toggle control.

```html
<div id="container">
<dx-menu
[adaptivityEnabled]="toggle"
>
<!-- ... -->
</dx-menu>
</div>
<dx-check-box
text="Enable adaptivity"
(onValueChanged)="onValueChanged($event)"
>
</dx-check-box>
```

```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
// ...
toggle: boolean = false;
onValueChanged(e: any) {
this.toggle = e.value;
}
}
```

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxMenuModule, DxCheckBoxModule } from "devextreme-angular";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxMenuModule,
DxCheckBoxModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
```

```css
#container {
width: 200px;
height: 140px;
}
```

--------------------------------

### Create a Button Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Button/Getting_Started_with_Button

Basic setup for the Button component including HTML template, component class, and module registration.

```html
<dx-button
  text="Click me!">
</dx-button>
```

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }
```

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DxButtonModule } from 'devextreme-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DxButtonModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Build Application

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Rollup

Run the build command to compile the application.

```bash
npm run build
```

--------------------------------

### Install Globalize and CLDR data

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application

Install the necessary packages for localization using npm.

```bash
npm install --save-dev devextreme-cldr-data globalize
```

--------------------------------

### Create sample DataSource for filtering

Source: https://js.devexpress.com/Angular/Documentation/Guide/Data_Binding/Data_Layer

Initialize a DataSource with a simple object array for filtering demonstrations.

```JavaScript
const dataSource = new DevExpress.data.DataSource([
  { name: "First item", value: 5 },
  { name: "Second item", value: 7 },
  { name: "Last item", value: 3 }
  ]);
```

--------------------------------

### Implement S3 Object Access

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Integration_Guides/Manage_Amazon_S3_Storage_with_DevExtreme_Components

Example logic for retrieving items and directories from S3 using the AWS SDK.

```csharp
public async Task<IEnumerable<FileSystemItem>> GetItemsAsync(string? path)
{
List<FileSystemItem> result = new List<FileSystemItem>(); ListObjectsV2Request request = new ListObjectsV2Request {
... };
ListObjectsV2Response response; do
  * response = await Client.ListObjectsV2Async(request);
var directories = await GetDirectoriesFromCommonPrefixes(response.CommonPrefixes);
...
request.ContinuationToken = response.NextContinuationToken;
} while (response.IsTruncated);
return result;
}
...
public async Task<List<FileSystemItem>> GetDirectoriesFromCommonPrefixes(List<string> prefixes) {
var result = new List<FileSystemItem>();
foreach (var item in prefixes) {
result.Add(new FileSystemItem() {
Name = GetDirectoryNameFromKey(item),
Key = item,
Size = 0,
IsDirectory = true,
DateModified = DateTime.UtcNow,
HasSubDirectories = await HasDirectorySubDirectoriesAsync(item),
});
}
return result;
}
  * return result; }
```

--------------------------------

### Install Export Dependencies

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/PivotGrid/Export

Command to install the necessary ExcelJS and FileSaver libraries for PivotGrid export functionality.

```bash
npm install --save devextreme-exceljs-fork file-saver
```

--------------------------------

### Install TypeScript for Inline Template Migration

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/DevExtreme_CLI

Commands to install TypeScript, which is required for migrating inline templates.

```bash
// Project install
npm i typescript --save-dev
// Global install
npm i -g typescript
```

--------------------------------

### Configure LocalStore for PivotGrid

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/PivotGrid/Data_Binding

Sets up a LocalStore by specifying the type and the name of the window.localStorage key.

```JavaScript
var pivotGridDataSource = {
  store: {
  type: 'local',
  name: 'myLocalStore'
  }
  };
```

--------------------------------

### Setup HTML for DataGrid Unit Testing

Source: https://js.devexpress.com/Angular/Documentation/Guide/jQuery_Components/Components_Testing

HTML boilerplate including jQuery, QUnit, and DevExtreme libraries required for unit testing.

```html
<meta charset="utf-8" />
<title>Test DataGrid</title>
<head>
<script src="https://code.jquery.com/qunit/qunit-2.16.0.js"></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/js/dx.all.js"></script>
<link
rel="stylesheet"
href="https://code.jquery.com/qunit/qunit-2.16.0.css"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/devextreme/21.1.4/css/dx.light.css"
rel="stylesheet"
/>
</head>
<body>
<div id="dataGrid"></div>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
```

--------------------------------

### Create DataSource from Store

Source: https://js.devexpress.com/Angular/Documentation/Guide/Data_Binding/Data_Layer

Initialize a DataSource using an existing Store instance or by providing store configuration.

```JavaScript
const store = new DevExpress.data.ArrayStore(data);
const dataSource = new DevExpress.data.DataSource(store);
```

```JavaScript
const store = new DevExpress.data.ArrayStore(array);
const dataSource = new DevExpress.data.DataSource({
sort: "name",
pageSize: 10,
store: store
});
```

--------------------------------

### Implement GUID Generation in Angular Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/FileUploader/How_To/Specify_a_file's_GUID

Handle the valueChanged event to update the upload URL with a new GUID.

```typescript
import { Component, NgModule } from '@angular/core';
  import { BrowserModule } from "@angular/platform-browser";
  import { DxFileUploaderModule } from "devextreme-angular";
  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  value: any[] = [];
  uploadUrl: string = "https://js.devexpress.com/Demos/NetCore/FileUploader/Upload";
  onValueChanged(e) {
  this.uploadUrl = this.updateQueryStringParameter("fileGuid", this.uuidv4());
  }
  updateQueryStringParameter(key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = this.uploadUrl.indexOf("?") !== -1 ? "&" : "?";
  if (this.uploadUrl.match(re)) {
  return this.uploadUrl.replace(re, "$1" + key + "=" + value + "$2");
  } else {
  return this.uploadUrl + separator + key + "=" + value;
  }
  }
  //https://stackoverflow.com/questions/105034/how-to-create-guid-uuid
  uuidv4() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
  var r = (Math.random() * 16) | 0,
  v = c === "x" ? r : (r & 0x3) | 0x8;
  return v.toString(16);
  });
  }
  }
  @NgModule({
  imports: [BrowserModule, DxFileUploaderModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
  })
  export class AppModule {}
```

--------------------------------

### Create DataSource with Store Configuration Object

Source: https://js.devexpress.com/Angular/Documentation/Guide/Data_Binding/Data_Layer

Initialize a DataSource by passing a configuration object that specifies the store type.

```JavaScript
const dataSource = new DevExpress.data.DataSource({
store: {
type: "array",
data: array
}
});
```

--------------------------------

### Import Custom File System Provider

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Use these patterns to import the Custom file system provider.

```javascript
require("devextreme/file_management/custom_provider");
```

```javascript
import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
```

--------------------------------

### Implement Angular Component Logic for GUID Retrieval

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/FileUploader/How_To/Get_a_file's_Guid_after_uploading_in_chunks

Access the custom response header containing the file GUID within the onUploaded event handler.

```typescript
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from "@angular/platform-browser";
import { DxFileUploaderModule } from "devextreme-angular";
  * @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onUploaded(e){
console.log(e.request.getResponseHeader("File-Guid"));
}
}
  * @NgModule({
imports: [BrowserModule, DxFileUploaderModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
```

--------------------------------

### Install stable DevExtreme via Yarn

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Distribution_Channels

Use these commands to install the latest stable version of DevExtreme packages using Yarn with exact version pinning.

```bash
yarn add devextreme@26.1 --exact
yarn add devextreme-angular@26.1 --exact
```

--------------------------------

### Initializing MCP Client for Documentation Tools

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Creates an MCP client to fetch tools from the DevExpress documentation endpoint for use in AI agents.

```csharp
using ModelContextProtocol.Client;

await using var mcpClient = await McpClient.CreateAsync(
new HttpClientTransport(new HttpClientTransportOptions
{
Endpoint = new Uri("https://api.devexpress.com/mcp/docs")
})
);
var mcpTools = await mcpClient.ListToolsAsync().ConfigureAwait(false);
```

--------------------------------

### Enable Point Labels and Connectors

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chart/Point_Labels/Overview

Demonstrates how to make point labels visible and enable connectors to link labels to their respective points.

```HTML
<dx-chart ... >
<dxi-chart-series>
<dxo-chart-label [visible]="true">
<dxo-chart-connector [visible]="true"></dxo-chart-connector>
</dxo-chart-label>
</dxi-chart-series>
</dx-chart>
```

--------------------------------

### Get All Properties

Source: https://js.devexpress.com/Angular/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax

Retrieve an object containing all current component properties.

```javascript
var dataGridInstance = $("#dataGridContainer").dxDataGrid("instance");
var dataGridOptions = dataGridInstance.option();
// ---------- or ----------
var dataGridOptions = $("#dataGridContainer").dxDataGrid("option");
```

--------------------------------

### Build the Application with Webpack

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Webpack

Execute this command to build the application using the Webpack module bundler.

```bash
  1. 


  * webpack
```

--------------------------------

### pageIndex(newIndex)

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DataGrid/Paging

Gets or sets the current page index of the DataGrid.

```APIDOC
## pageIndex(newIndex)

### Description
Gets or sets the current page index. If called without arguments, it returns the current page index.

### Parameters
- **newIndex** (number) - Optional - The zero-based index of the page to switch to.
```

--------------------------------

### Create a NumberBox Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/NumberBox/Getting_Started_with_NumberBox

Basic setup for the NumberBox component in an Angular application.

```html
<dx-number-box></dx-number-box>
```

```typescript
import { Component } from "@angular/core";

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
}
```

```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

import { DxNumberBoxModule } from "devextreme-angular";

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxNumberBoxModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Configure RemoteFileSystemProvider on Client

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Integration_Guides/Manage_Azure_Blob_Storage_with_DevExtreme_Components

Initialize the RemoteFileSystemProvider pointing to the custom Azure file system endpoint.

```javascript
const provider = new DevExpress.fileManagement.RemoteFileSystemProvider({
  endpointUrl: `${baseUrl}file-manager-azure`,
  });
```

--------------------------------

### Run Migration Command

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/DevExtreme_CLI

Commands to execute the migration to named configuration components.

```bash
// If DevExtreme CLI is installed (in your project or global node_modules)
devextreme migrate angular-config-components
// If DevExtreme CLI is not installed
npx devextreme-cli migrate angular-config-components
```

--------------------------------

### pageSize(value)

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DataGrid/Paging

Gets or sets the number of records displayed on a single page.

```APIDOC
## pageSize(value)

### Description
Gets or sets the page size. If called without arguments, it returns the current page size.

### Parameters
- **value** (number) - Optional - The number of records to display per page.
```

--------------------------------

### Import devices from environment module

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Use these patterns to access the device object.

```javascript
* require("devextreme/common/core/environment").devices;
    * // ===== or =====
    * import { devices } from "devextreme/common/core/environment";
```

--------------------------------

### Declare Content in Markup

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Component_Configuration_Syntax

Example of declaring static content within a component.

```html
<dx-scroll-view>
<div>Some scrollable content</div>
</dx-scroll-view>
```

--------------------------------

### Define Data Source and Modules

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/FilterBuilder/Integrate_with_a_DevExtreme_UI_Component

Set up the component class with product data and import the necessary DevExtreme modules.

```TypeScript
import { DxListModule, DxFilterBuilderModule } from "devextreme-angular";
// ...
export class AppComponent {
products = [{
ID: 1,
Name: "HD Video Player",
Price: 330,
Category: "Video Players"
}, {
ID: 2,
Name: "SuperPlasma 50",
Price: 2400,
Category: "Televisions"
},
// ...
];
}
@NgModule({
imports: [
// ...
DxListModule,
DxFilterBuilderModule
],
// ...
})
```

--------------------------------

### Install Export Dependencies

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid

Required npm packages for Excel and PDF export functionality.

```bash
npm install --save devextreme-exceljs-fork file-saver
npm install jspdf
```

--------------------------------

### Create a UI Component with Modules

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Common/Advanced/3rd-Party_Frameworks_Integration_API

Instantiate a component by passing the target element and configuration object to the constructor.

```javascript
import Accordion from "devextreme/ui/accordion";
...
let container = document.getElementById("root");
let element = document.createElement("div");
container.appendChild(element);
let instance = new Accordion(element, options);
```

--------------------------------

### Core Environment Modules

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Helpers for device management, viewport, and time zones.

```APIDOC
## devices

### Description
Access the device information object.

### Usage
```javascript
import { devices } from "devextreme/common/core/environment";
```

## initMobileViewport(options)

### Description
Initializes the mobile viewport settings.

### Usage
```javascript
import { initMobileViewport } from "devextreme/common/core/environment";
```
```

--------------------------------

### Import initMobileViewport from environment module

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Use these patterns to access the initMobileViewport method.

```javascript
* require("devextreme/common/core/environment").initMobileViewport;
    * // ===== or =====
    * import { initMobileViewport } from "devextreme/common/core/environment";
```

--------------------------------

### Clear NPM Cache

Source: https://js.devexpress.com/Angular/Documentation/Guide/Troubleshooting/DevExtreme_CLI_Issues/Create_a_New_Application

Command to force clear the NPM cache when troubleshooting installation errors.

```bash
npm cache clean --force
```

--------------------------------

### Import Object File System Provider

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Use these patterns to import the Object file system provider.

```javascript
require("devextreme/file_management/object_provider");
```

```javascript
import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
```

--------------------------------

### Define Component for Validation

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Common/UI_Widgets/Data_Validation

Basic Angular component setup to support the login input field.

```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
login: string;
}
```

--------------------------------

### Initialize CustomStore in Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chart/Data_Binding/MongoDB_Service

Use createStore from devextreme-aspnet-data-nojquery to connect the component to the MongoDB service URL.

```typescript
import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from "devextreme-aspnet-data-nojquery";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
store: CustomStore;
constructor() {
const serviceUrl = "https://url/to/my/service";
this.store = createStore({
key: 'ID',
loadUrl: serviceUrl
});
}
}
```

--------------------------------

### Define a One-Time Appointment

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Scheduler/Appointments/Appointment_Types

Structure a basic appointment object with specific start and end dates.

```JavaScript
  * var appointment = [{
  * text: "Meet with a customer",
  * startDate: new Date("2021-05-21T15:00:00.000Z"),
  * endDate: new Date("2021-05-21T16:00:00.000Z")
  * }];
```

--------------------------------

### Markup Cleanup Example

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/HtmlEditor/Limitations

Demonstrates how the editor automatically removes redundant tags from the input markup.

```html
    1.     2.     3.     4.     5. 

    * <!-- from -->
    * <p><span>Hello</span><em><span>World</span></em></p>
    *     * <!-- to -->
    * <p>Hello<em>World</em></p>
```

--------------------------------

### HTML Editor Form Implementation

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Security_Considerations

Example of a form containing a DevExtreme HTML Editor component.

```html
<form
action="your-action"
(submit)="onFormSubmit($event)">
<dx-html-editor ...
[(value)]="editorValue">
</dx-html-editor>
<dx-button
[useSubmitBehavior]="true"
text="Submit the Form">
</dx-button>
</form>
```

--------------------------------

### Create a UI Component with Namespaces

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Common/Advanced/3rd-Party_Frameworks_Integration_API

Use DevExpress.ui or DevExpress.viz namespaces for non-modular environments.

```javascript
let instance = new DevExpress.ui.dxAccordion(element, options);
let dataVizInstance = new DevExpress.viz.dxPolarChart(element, options);
```

--------------------------------

### Use DevExtreme Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Rollup

Example of using a DevExtreme component in HTML and its corresponding component logic.

```html
<dx-button
text="Click me"
(onClick)="helloWorld()">
</dx-button>
```

```typescript
import { Component } from '@angular/core';
  * @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
helloWorld() {
alert('Hello world!');
}
}
```

--------------------------------

### Importing Individual Theme Files

Source: https://js.devexpress.com/Angular/Documentation/Guide/Themes_and_Styles/Predefined_Themes

Import specific files to construct a custom theme configuration, such as the Material Blue Light Compact theme.

```scss
* @use 'devextreme/scss/widgets/material/colors' with ($color: 'blue', $mode: 'light');
  * @use 'devextreme/scss/widgets/material/sizes' with ($size: 'compact');
  * @use 'devextreme/scss/widgets/material/icons';
  * @use 'devextreme/scss/widgets/material/widget';
  * @use 'devextreme/scss/widgets/material/card';
  * @use 'devextreme/scss/widgets/material/fieldset';
  * @use 'devextreme/scss/widgets/material/common';
  * @use 'devextreme/scss/widgets/base/resizable';
  * @use 'devextreme/scss/widgets/base/draggable';
  * @use 'devextreme/scss/widgets/base/ui';
  * @use 'devextreme/scss/widgets/material';
```

--------------------------------

### Configure Pagination Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Pagination/Getting_Started_with_Pagination

Basic setup for the dx-pagination component in an Angular template and its corresponding component class.

```html
<dx-pagination
  [showInfo]="true"
  [showNavigationButtons]="true"
  [itemCount]="total"
  [pageIndex]="pageIndex"
  [pageSize]="pageSize"
  >
  </dx-pagination>
```

```typescript
import { Component } from '@angular/core';
  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  total = 100;
  pageIndex = 3;
  pageSize = 5;
  }
```

--------------------------------

### Set Initial Calendar Zoom Level

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Calendar/Specify_Zoom_Level

Configure the starting view of the calendar using the zoomLevel property.

```HTML
<dx-calendar ...
zoomLevel="year">
</dx-calendar>
```

```TypeScript
import { DxCalendarModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxCalendarModule
],
// ...
})
```

--------------------------------

### Configure OpenAI Instance

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chat/Integrate_with_AI_Service

Initialize the OpenAI client. Note that dangerouslyAllowBrowser: true is used for development and should be replaced by a backend proxy in production.

```typescript
import { OpenAI } from "openai";
export class AppService {
chatService: OpenAI;
OpenAIConfig = {
dangerouslyAllowBrowser: true,
apiKey: "OPENAI_API_KEY", // insert your OpenAI API key
};
constructor() {
this.chatService = new OpenAI(this.OpenAIConfig);
}
}
```

--------------------------------

### Generate a Color Swatch via CLI

Source: https://js.devexpress.com/Angular/Documentation/Guide/Themes_and_Styles/Predefined_Themes

Use the DevExtreme CLI to build a custom color swatch based on a specific theme.

```bash
> devextreme build-theme –-base-theme="generic.dark" --make-swatch --output-color-scheme="dark"
```

```bash
> npx -p devextreme-cli devextreme build-theme –-base-theme="generic.dark" --make-swatch --output-color-scheme="dark"
```

--------------------------------

### Get and Set Component Properties

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Common/Advanced/3rd-Party_Frameworks_Integration_API

Use the option() method to read or modify component properties at runtime.

```javascript
// Get a property value
let isVisible = instance.option("visible");
  * // Set a property value
instance.option("visible", false);
```

--------------------------------

### currentTheme(theme) / currentTheme(platform, colorScheme)

Source: https://js.devexpress.com/Angular/Documentation/Guide/Common/Modularity/DevExtreme_Modules_Structure

Gets or sets the current theme for DevExtreme visualization components.

```APIDOC
## currentTheme(theme) / currentTheme(platform, colorScheme)

### Description
Gets or sets the current theme. Can be called with a specific theme name or by specifying platform and colorScheme.

### Usage
import { currentTheme } from "devextreme/viz/themes";
```
Tokens:
Raw