<div class="form">
<div class="dx-fieldset">
<div class="dx-fieldset-header">Default Mode</div>
<div class="dx-field">
<div class="dx-field-label">First Name</div>
<div class="dx-field-value">
<dx-autocomplete
placeholder="Type first name..."
[(value)]="firstName"
[dataSource]="names"
(onValueChanged)="updateEmployeeInfo()"
>
</dx-autocomplete>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">With Clear Button</div>
<div class="dx-field">
<div class="dx-field-label">Last Name</div>
<div class="dx-field-value">
<dx-autocomplete
placeholder="Type last name..."
[showClearButton]="true"
[dataSource]="surnames"
[(value)]="lastName"
(onValueChanged)="updateEmployeeInfo()"
>
</dx-autocomplete>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Disabled</div>
<div class="dx-field">
<div class="dx-field-label">Position</div>
<div class="dx-field-value">
<dx-autocomplete
[disabled]="true"
[value]="position"
[dataSource]="positions"
[inputAttr]="{ 'aria-label': 'Position' }"
>
</dx-autocomplete>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header"
>Custom Item Template and Data Source Usage</div
>
<div class="dx-field">
<div class="dx-field-label">State</div>
<div class="dx-field-value">
<dx-autocomplete
placeholder="Type state name..."
valueExpr="Name"
[dataSource]="states"
[(value)]="state"
(onValueChanged)="updateEmployeeInfo()"
>
<div *dxTemplate="let item of 'item'">
<span>{{ item.Name }} ({{ item.Short }})</span>
</div>
</dx-autocomplete>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Custom Store and Search Options</div>
<div class="dx-field">
<div class="dx-field-label">Current Client</div>
<div class="dx-field-value">
<dx-autocomplete
placeholder="Type client name..."
[minSearchLength]="2"
[searchTimeout]="500"
valueExpr="Text"
[dataSource]="clientsStore"
[(value)]="currentClient"
(onValueChanged)="updateEmployeeInfo()"
>
</dx-autocomplete>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling</div>
<div class="employees-data">
Employee data: <span>{{ fullInfo }}</span>
</div>
</div>
</div>
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';
import { DxAutocompleteModule } from 'devextreme-angular';
import { CustomStore } from 'devextreme-angular/common/data';
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
import { Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
function isNotEmpty(value: unknown): boolean {
return value !== undefined && value !== null && value !== '';
}
@Component({
selector: 'demo-app',
providers: [Service],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
imports: [
DxAutocompleteModule,
],
})
export class AppComponent {
names: string[];
surnames: string[];
positions: string[];
states: CustomStore;
clientsStore: CustomStore;
firstName = '';
lastName = '';
position: string;
state = '';
currentClient = '';
fullInfo = '';
constructor(httpClient: HttpClient, service: Service) {
this.clientsStore = new CustomStore({
key: 'Value',
useDefaultSearch: true,
load(loadOptions) {
let params: HttpParams = new HttpParams();
[
'skip',
'take',
'filter',
].forEach((option) => {
if (option in loadOptions && isNotEmpty(loadOptions[option])) {
params = params.set(option, JSON.stringify(loadOptions[option]));
}
});
return lastValueFrom(httpClient.get('https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup', { params }))
.then(({ data }: { data: Record<string, unknown>[] }) => ({
data,
}))
.catch(() => { throw new Error('Data Loading Error'); });
},
});
this.states = AspNetData.createStore({
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
key: 'ID',
});
this.names = service.getNames();
this.surnames = service.getSurnames();
this.positions = service.getPositions();
this.position = this.positions[0];
}
updateEmployeeInfo() {
let result = '';
result += (`${this.firstName || ''} ${this.lastName || ''}`).trim();
result += (result && this.position) ? (`, ${this.position}`) : this.position || '';
result += (result && this.state) ? (`, ${this.state}`) : this.state || '';
result += (result && this.currentClient) ? (`, ${this.currentClient}`) : this.currentClient || '';
this.fullInfo = result;
}
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
provideHttpClient(withFetch()),
],
});
.employees-data {
padding-top: 16px;
padding-bottom: 10px;
}
import { Injectable } from '@angular/core';
export class Data {
names: string[];
surnames: string[];
positions: string[];
}
const data: Data = {
names: [
'James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah',
],
surnames: [
'Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee', 'Walker', 'Hall', 'Allen', 'Young', 'Hernandez', 'King', 'Wright', 'Lopez', 'Hill', 'Scott', 'Green', 'Adams', 'Baker', 'Gonzalez', 'Nelson', 'Carter', 'Mitchell', 'Perez', 'Roberts', 'Turner', 'Phillips', 'Campbell', 'Parker', 'Evans', 'Edwards', 'Collins'],
positions: [
'CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager'],
};
@Injectable()
export class Service {
getNames() {
return data.names;
}
getSurnames() {
return data.surnames;
}
getPositions() {
return data.positions;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></script>
</body>
</html>