### Install DevExtreme and DevExtreme Angular CLI

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

Use this command to install DevExtreme and its Angular components. This command is part of the DevExtreme CLI and simplifies the setup process.

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

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

### Install OpenAI SDK

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

Install the OpenAI SDK using npm. Ensure DevExtreme is already installed in your project.

```bash
npm install openai
```

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

### Install Dialogflow and Server Dependencies

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

Install the necessary npm packages for Dialogflow integration and server setup.

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

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

### Basic Angular Component Setup

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

This is a standard Angular component setup. Ensure your component is correctly defined to use DevExtreme components.

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

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

  }
}
```

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

### Install DevExtreme and ThemeBuilder Packages

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

Installs the `devextreme` and `devextreme-themebuilder` packages with specific versions. Ensure both packages have the same version and are correctly listed in `package.json`.

```bash
npm i devextreme@25.2 --save --save-exact
```

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

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

### Install Export Libraries

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

Install the required third-party libraries for Excel and PDF export.

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

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

### Install DevExtreme CLI Globally

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

Installs the DevExtreme CLI globally using npm. Alternatively, use npx to run commands without global installation.

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

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

### Angular Component Setup

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

Basic Angular component setup for the application. This includes importing necessary modules and defining the component's metadata.

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

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

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

### Install DevExtreme Schematics for Migration

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

Installs the DevExtreme Schematics package, which is required for the `devextreme migrate` command. Choose project or global installation based on your needs.

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

```bash
// Global install
npm i -g devextreme-schematics
```

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

### Install DevExtreme ThemeBuilder Package

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

If your application was created using the DevExtreme CLI, install the ThemeBuilder package with the specified version.

```bash
npm install devextreme-themebuilder@25.2 --save --save-exact
```

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

### Angular Component Setup for Chart

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

This is the basic Angular component setup. Ensure your component is correctly defined to host the chart.

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

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

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

### Add Server Start Script to package.json

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

Add this script to your package.json to easily start your Dialogflow server.

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

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

### Install PivotGrid Export Dependencies

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

Install the required third-party libraries for PivotGrid export functionality using npm.

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

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

### Install Angular CLI

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

Installs the Angular CLI globally, which is necessary for creating and managing Angular projects.

```bash
npm install -g @angular/cli
```

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

### Angular Component Setup

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

This is a standard Angular component setup. Ensure your component is correctly declared and imported in your application's module.

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

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

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

### Angular Component Setup for TreeList

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList

Basic Angular component setup. Ensure the component is correctly defined with its template and stylesheet references.

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

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

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

### Angular Root Component Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/CardView/Getting_Started_with_CardView

This is a standard Angular root component setup. No specific CardView configuration is needed here.

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

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

}
```

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

### Install Rollup Plugins

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

Install necessary Rollup plugins for handling node modules, commonjs modules, and aliasing.

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

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

### Install AWS SDK for .NET

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

Installs the AWS SDK for S3 using the .NET CLI. This package provides the necessary tools for authenticating requests and parsing S3 responses.

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

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

### Angular Component Setup for Form with Tabs

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Form/Organize_Simple_Items/In_Tabs

Provides the necessary Angular component setup, including importing DxFormModule and defining the employee data model.

```typescript
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
  employee = {
    name: "John Heart",
    position: "CEO",
    hireDate: new Date(2012, 4, 13),
    city: "Los Angeles",
    phone: "+1(213) 555-9392",
    email: "jheart@dx-email.com"
  }
}
@NgModule({
  imports: [
    // ...
    DxFormModule
  ],
  // ...
})
```

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

### Angular List Data Source and Module Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/List/Searching

This code provides the necessary TypeScript setup for the Angular List component, including sample data and module import.

```typescript
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
  listData = [
    { id: 1, country: "Afghanistan", capital: "Kabul" },
    { id: 2, country: "Albania", capital: "Tirana" },
    // ...
  ];
}
@NgModule({
  imports: [
    // ...
    DxListModule
  ],
  // ...
})
```

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

### HTML Setup for QUnit and SinonJS

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

Include this HTML structure to set up your testing environment. It references QUnit and SinonJS, which are necessary for running the integration tests.

```html
<!DOCTYPE html>
<html>
<head>
  <title>QUnit Test Suite</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.1.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <div id="dataGrid"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.19.1.js"></script>
  <!-- This script allows you to simulate timers. -->
  <script src="https://cdn.jsdelivr.net/npm/sinon@9/pkg/sinon.js"></script>
</body>
</html>
```

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

### Basic RangeSlider Setup

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

Imports the DxRangeSliderModule and defines the start and end values for the RangeSlider component in your Angular application.

```typescript
import { DxRangeSliderModule } from "devextreme-angular";

// ...

export class AppComponent {
  startValue = 20;
  endValue = 60;
}

@NgModule({
  imports: [
    // ...
    DxRangeSliderModule
  ],
  // ...
})
```

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

### Angular Component Setup for Data Modification

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

Example of an Angular component setting up a DataSource and demonstrating data modification operations.

```typescript
import { Component } from '@angular/core';
import DataSource from 'devextreme/data/data_source';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dataSource: DataSource;
  constructor() {
    this.dataSource = new DataSource({
      // ...
    });

    const store = this.dataSource.store();
    store.insert({ id: 1, name: "John Doe" })
    .then(
      (dataObj) => {
        this.dataSource.reload();
      },
      (error) => { /* ... */ }
    );

    store.update(1, { name: "John Smith" })
    .then(
      (dataObj) => {
        this.dataSource.reload();
      },
      (error) => { /* ... */ }
    );

    store.remove(1)
    .then(
      (key) => {
        this.dataSource.reload();
      },
      (error) => { /* ... */ }
    );
  }
}
```

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

### Define Initial Start and End Dates in Component

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DateRangeBox/Getting_Started_with_DateRangeBox

Set the 'startDate' and 'endDate' properties in the component's TypeScript file to define the initial date range displayed in the DateRangeBox. The example sets the range to start from the current date and last for 7 days.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // ...
  startDate: Date = new Date();
  endDate: Date = new Date().setDate(new Date().getDate()+7);
}
```

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

### Configure Post-Install Script for License Key

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

Add a postinstall script to package.json to automatically run the license key creation script after npm modules are installed.

```json
{
"scripts": {
"postinstall": "node add-devextreme-license"
},
}
```

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

### Angular Lookup with ArrayStore

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Lookup/Data_Binding/Simple_Array/ArrayStore

Use ArrayStore to bind data to an Angular Lookup component. This example shows basic setup for value and display expressions.

```html
<dx-lookup
  [dataSource]="lookupDataSource"
  valueExpr="price"
  displayExpr="name">
</dx-lookup>
```

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

### Implement ODataStore for Products

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

This snippet shows how to create an ODataStore instance to fetch product data from an OData service. It includes the service URL, key property, OData version, and an example of handling the onLoaded event.

```typescript
import { Component } from '@angular/core';
import ODataStore from 'devextreme/data/odata/store';

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

  constructor() {
    this.productsStore = new ODataStore({
      url: 'http://www.example.com/Northwind.svc/Products',
      key: 'Product_ID',
      version: 3,
      onLoaded: () => {
        // Event handling commands go here
      }
    });
  }
}
```

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

### Import DxDateBoxModule

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/DateBox/Control_the_Behavior

Ensure DxDateBoxModule is imported in your Angular module to use the DateBox component. This example shows a basic component setup with a DateBox instance.

```typescript
import { DxDateBoxModule } from "devextreme-angular";

// ...

export class AppComponent {
  date: Date = new Date()
}

@NgModule({
  imports: [
    // ...
    DxDateBoxModule
  ],
  // ...
})
```

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

### Create a Sample DataSource for Filtering

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

Initializes a DevExtreme DataSource with a simple array of objects for demonstrating filtering.

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

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

### Configure DataSource with Store and Options

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

Create a DataSource with specific configuration options like sorting and page size, passing a Store instance to the 'store' property.

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

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

### Call IChatClient in ChatController

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

Call the IChatClient in a controller to get AI responses. This example shows how to handle user messages and build chat history.

```csharp
[HttpPost("GetAIResponse")]
public async Task<ClientChatMessage> GetAIResponse([FromBody] ClientChatMessage userMessage) {
  var chatMessages = BuildChatHistory(userMessage);
  var completion = await _chatClient.CompleteAsync(chatMessages);
  return ToAssistantMessage(completion);
}
```

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

### Import Individual Theme Components (Material Light Compact)

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

Import specific SCSS files for individual theme components to achieve granular control. This example shows importing parts of 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';
```

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

### Export PivotGrid to CSV

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

Exports PivotGrid data to a CSV file using the `exportPivotGrid` method. This example demonstrates the necessary imports and component setup for exporting to CSV.

```typescript
import { Component } from '@angular/core';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportPivotGrid } from 'devextreme/excel_exporter';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(DxPivotGridComponent, { static: false }) pivotGrid: DxPivotGridComponent;
  onExporting: function(e) {
    const workbook = new Workbook();
    const worksheet = workbook.addWorksheet('Employees');
    exportPivotGrid({
      component: e.component,
      worksheet: worksheet
    }).then(function() {
      workbook.csv.writeBuffer().then(function(buffer) {
        saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
      });
    });
  }
}
```

```html
<dx-pivot-grid ... 
(onExporting)="onExporting($event)"
>
</dx-pivot-grid>
```

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

### MultiView Data Source Setup

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

Defines the data source for the MultiView component. Each item in the array represents a view. This example uses simple objects with a 'text' property.

```typescript
import { DxMultiViewModule } from 'devextreme-angular';
// ...
export class AppComponent {
  multiViewItems = [
    { text: 'Personal Data' },
    { text: 'Contacts' },
    { text: 'Address' }
  ];
}
@NgModule({
  imports: [
    // ...
    DxMultiViewModule
  ],
  // ...
})
```

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

### Configure CustomStore with createStore

Source: https://js.devexpress.com/Angular/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Web_API,_PHP,_MongoDB

Use the createStore method to configure a CustomStore for accessing server data. This example shows how to set up URLs for load, insert, update, and delete operations.

```javascript
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';
import DataGrid, {
  RemoteOperations
} from 'devextreme-react/data-grid';
import { createStore } from 'devextreme-aspnet-data-nojquery';

const serviceUrl = 'https://mydomain.com/MyDataService';

const remoteDataSource = createStore({
  key: 'ID',
  loadUrl: serviceUrl + '/GetAction',
  insertUrl: serviceUrl + '/InsertAction',
  updateUrl: serviceUrl + '/UpdateAction',
  deleteUrl: serviceUrl + '/DeleteAction'
});

class App extends React.Component {
  render() {
    return (
      <DataGrid
        dataSource={remoteDataSource}>
        <RemoteOperations groupPaging={true} />
      </DataGrid>
    );
  }
}

export default App;
```

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

### Handle DataSource Events with Configuration Property

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

Attach an event handler to a DataSource using its configuration properties, which start with 'on'. This example shows handling the 'onChanged' event.

```javascript
var dataSource = new DevExpress.data.DataSource({
    sort: "name",
    pageSize: 10,
    store: store,
    onChanged: function() {
        // Executed after the DataSource has successfully loaded data
    }
});
```

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

### Angular Component Setup for Local Array Binding

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

Example of an Angular component defining a local array and a method to add items to it, intended for UI component binding.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 }
  ];

  addPineapple() {
    this.fruits.push({ fruit: 'Pineapples', count: 3 });
  }
}
```

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

### Angular Component Setup

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

Set up the Angular component to use the RemoteFileSystemProvider. This involves importing the provider and initializing it with the server endpoint.

```typescript
import { Component } from '@angular/core';
import RemoteFileSystemProvider from 'devextreme/file_management/remote_provider';

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

    constructor() {
        this.remoteFileProvider = new RemoteFileSystemProvider({
            endpointUrl: "https://js.devexpress.com/Demos/Mvc/api/file-manager-file-system-scripts"
        });
    }
}
```

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

### Angular Module Setup with DevExtreme

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

Import the necessary DevExtreme modules into your Angular application's module to use DevExtreme components. This example shows importing `DxSliderModule`.

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

import { DxSliderModule } from 'devextreme-angular';

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

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

### Install React Testing Library

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

Add the React Testing Library to your project. This is automatically included when using Create React App.

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

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

### DevExtreme Angular FileUploader Application

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

View the FileUploader application example on GitHub. This snippet shows the setup and integration of the DevExtreme FileUploader component with Azure Blob Storage.

```markdown
**FileUploader** application:
View on GitHub
```

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

### Get Edited Cell Values in DataGrid

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

Retrieve current cell values, whether saved or unsaved, using the cellValue method. This example demonstrates how to get the edit row key, its index, and then the cell value for a specified data field. The cellValue method returns values only after editors lose focus.

```typescript
import { Component, ViewChild } from "@angular/core";
import { DxDataGridComponent } from "devextreme-angular";
  
export class AppComponent {
  @ViewChild(DxDataGridComponent, { static: false }) dataGrid!: DxDataGridComponent;
  
  getCellValue() {
    const editRowKey = this.dataGrid.instance.option('editing.editRowKey');
    const editRowIndex = this.dataGrid.instance.getRowIndexByKey(editRowKey);
    
    if (editRowIndex >= 0) {
      return this.dataGrid.instance.cellValue(editRowIndex, dataField);
    }
    
    return null;
  }
}
```

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

### Import Dependencies for Testing

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

Import necessary testing utilities and components. This example includes React, testing library functions, and a custom component.

```javascript
<!--App.js-->
// Import dependencies
import React from 'react'
import {render, screen, waitFor} from '@testing-library/react'
import '@testing-library/jest-dom'
// Import a component
import DataGridComponent from './DataGrid'
```

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

### Accessing UI Component Instance in Markup with Template Reference Variable

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

Shows how to use a template reference variable to access a UI component instance directly within the HTML markup, for example, to get its value.

```html
<dx-select-box #targetSelectBox [items]="items"></dx-select-box>
{{targetSelectBox.value}}
```

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

### Task Data Structure Example

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

Defines the structure for task data objects in the Gantt's dataSource. Ensure 'id', 'parentId', 'title', 'start', 'end', and 'progress' fields are present for automatic mapping, or use fieldExpr properties for custom names.

```javascript
{
  "id": 1,
  "parentId": 0,
  "title": "Software Development",
  "start": new Date("2019-02-21T05:00:00.000Z"),
  "end": new Date("2019-07-04T12:00:00.000Z"),
  "progress": 31
}
```

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

### Angular Component Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Accordion/Getting_Started_with_Accordion

Basic Angular component structure for integrating DevExtreme components.

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

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

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

### Create MCP Client for DevExpress Documentation Tools

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

Initializes an MCP client to list DevExpress documentation tools. Requires a valid endpoint for the MCP API.

```csharp
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);
```

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

### Get Visible Series Points in Angular Chart

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Chart/Series_Points/Access_a_Series_Point_Using_the_API

Retrieves series points that are currently visible within the chart's axis visual range. Note that the example provided in the source seems to have a typo, passing an argument to `getVisiblePoints()` which typically does not take arguments.

```typescript
import { DxChartModule, DxChartComponent } from "devextreme-angular";
import { Component, ViewChild, NgModule } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "app/app.component.html",
  styleUrls: ["app/app.component.css"]
})
export class AppComponent {
  @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
  // Prior to Angular 8
  // @ViewChild(DxChartComponent) chart: DxChartComponent;
  visiblePoints: any = [];

  getVisiblePoints() {
    let series = this.chart.instance.getSeriesByName("Series 1");
    this.visiblePoints = series.getVisiblePoints();
  }
}

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

```

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

### Configure Form Submission with Button

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Form/Getting_Started_with_Form

Use a Button item with `useSubmitBehavior: true` to submit the form. Ensure the dxForm is wrapped in an HTML form element and `preventDefault` is set to true in the component to override the default HTML form submit event. This example shows the basic setup for form submission.

```html
<form action="/employee-page" (submit)="handleSubmit($event)">
  <dx-form
    [formData]="employee"
    [colCount]="2">
    <dxi-form-item
      itemType="group"
      caption="Personal Information"
      [colCount]="2">
      <dxi-form-item dataField="name" [isRequired]="true">
      </dxi-form-item>
      <dxi-form-item dataField="officeNumber">
        <dxi-form-validation-rule type="numeric">
        </dxi-form-validation-rule>
      </dxi-form-item>
      <dxi-form-item dataField="email">
        <dxi-form-validation-rule type="email">
        </dxi-form-validation-rule>
      </dxi-form-item>
    </dxi-form-item>
    <dxi-form-item
      itemType="button"
      [buttonOptions]="submitButtonOptions">
    </dxi-form-item>
  </dx-form>
</form>
```

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

### HTML Structure for DataGrid Unit Test

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

Sets up the HTML document with necessary libraries (jQuery, QUnit, DevExtreme) and containers for the DataGrid and QUnit test results. Load these libraries from CDN.

```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>
```

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

### Configure Lookup Search Properties

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Lookup/Getting_Started_with_Lookup

Set searchMode, searchExpr, minSearchLength, and showDataBeforeSearch to control how users search within the Lookup component. This example configures search to find items containing the search value in either 'Assignee' or 'Subject' fields, starting after two characters are typed, and showing data before the search begins.

```html
<dx-lookup 
    ... 
    searchMode="contains"
    [searchExpr]="['Assignee', 'Subject']"
    [minSearchLength]="2"
    [showDataBeforeSearch]="true">
</dx-lookup>
```

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

### Create Guid Instance from String

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

Create a DevExtreme Guid instance by providing a string representation of a GUID.

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

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

### Basic MultiView Configuration

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

This snippet shows the most basic setup for the MultiView component, requiring only the dataSource property. Ensure your data source items have the correct structure.

```html
<dx-multi-view
  [dataSource]="multiViewItems">
</dx-multi-view>
```

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

### Create a DevExtreme DataSource

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

Initializes a DevExtreme DataSource with an array of data.

```javascript
const dataSource = new DevExpress.data.DataSource(data);
```

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

### Configure a DevExtreme Button Component

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

This example demonstrates how to configure a DevExtreme Button component by passing a configuration object with properties like 'text' and an 'onClick' event handler to the dxButton plugin.

```javascript
$(function () {
  $("#buttonContainer").dxButton({
    text: "Click me!",
    onClick: function () {
      alert("Hello world!");
    }
  });
});
```

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

### Install TypeScript for Inline Template Migration

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

Installs the TypeScript package, which is required for migrating inline templates within Angular component class decorators. Choose project or global installation.

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

```bash
// Global install
npm i -g typescript
```

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

### Configure Form Module and Data for Responsive Layout

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Form/Organize_Simple_Items/In_Columns

Import `DxFormModule`, define the component's data model, and implement a `getSizeQualifier` function to map screen widths to size qualifiers (xs, sm, md, lg). This enables responsive column adjustments.

```typescript
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
  employee = {
    firstName: "John",
    lastName: "Heart",
    position: "CEO",
    hireDate: new Date(2012, 4, 13)
  }
  getSizeQualifier (width) {
    if (width < 768) return "xs";
    if (width < 992) return "sm";
    if (width < 1200) return "md";
    return "lg";
  }
}
@NgModule({
  imports: [
    // ...
    DxFormModule
  ],
  // ...
})
```

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

### Angular FileUploader - TypeScript Implementation for GUID

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

This TypeScript code defines the `AppComponent` with methods to generate a GUID and update the upload URL with the generated GUID as a query parameter. It requires `DxFileUploaderModule` to be imported.

```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 {}

```

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

### Basic Splitter Setup

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Splitter/Getting_Started_with_Splitter

This snippet shows the basic HTML structure for a DevExtreme Splitter component with specified width, height, and separator size. It includes nested splitter items and a vertical splitter.

```html
<container>
  <dx-splitter
    [width]="500"
    [height]="400"
    [separatorSize]="5"
    >
    <dxi-splitter-item></dxi-splitter-item>
    <dxi-splitter-item>
      <dx-splitter orientation="vertical" [separatorSize]="5">
        <dxi-splitter-item></dxi-splitter-item>
        <dxi-splitter-item></dxi-splitter-item>
        <dxi-splitter-item></dxi-splitter-item>
      </dx-splitter>
    </dxi-splitter-item>
  </dx-splitter>
</container>
```

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

### Install Latest Stable DevExtreme via Yarn

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

Use this command to install the latest stable version of DevExtreme and devextreme-angular packages using Yarn. The --exact flag ensures a specific version is installed.

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

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

### Show Popup with DxPopupService

Source: https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/Popup/Show_and_Hide_the_Popup

Demonstrates how to open a popup using DxPopupService, passing the component class and configuration options. The popup content's instance can be accessed via `contentRef.instance`.

```typescript
import { DxPopupService } from 'devextreme-angular/ui/popup';
// ...
export class AppComponent {
employees: Employee[];
  constructor(
employeeService: EmployeeService,
private popupService: DxPopupService
) {
this.employees = employeeService.getEmployees();
}
  showInfo(employee: Employee) {
const popupRef = this.popupService.open(EmployeeInfoComponent, {
showTitle: true,
title: 'Information',
container: 'html',
width: 300,
showCloseButton: true,
});
  
popupRef.contentRef.instance.currentEmployee = employee;
}
}
```

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

### Install Types for Speech Recognition

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

Install the @types/dom-speech-recognition package to include SpeechRecognition types in your project.

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