app.component.ts

import {ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { DxNumberBoxModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';
import { DataSource } from 'devextreme-angular/common/data';
import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
import { Product, Service, SimpleProduct } from './app.service';

if (!/localhost/.test(document.location.host)) {
  enableProdMode();
}

let modulePrefix = '';
// @ts-ignore
if (window && window.config?.packageConfigPaths) {
  modulePrefix = '/app';
}

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'demo-app',
  templateUrl: `.${modulePrefix}/app.component.html`,
  styleUrls: [`.${modulePrefix}/app.component.css`],
  providers: [Service],
  imports: [
    DxSelectBoxModule,
    DxNumberBoxModule,
    DxCheckBoxModule,
  ],
})
export class AppComponent {
  products: Product[];

  simpleProducts: SimpleProduct[];

  productsDataSource: DataSource;

  product: number;

  searchModeOption = 'contains';

  searchExprOption = 'Name';

  searchTimeoutOption = 200;

  minSearchLengthOption = 0;

  showDataBeforeSearchOption = false;

  searchExprOptionItems = [{
    name: "'Name'",
    value: 'Name',
  }, {
    name: "['Name', 'Category']",
    value: ['Name', 'Category'],
  }];

  constructor(service: Service) {
    this.products = service.getProducts();
    this.simpleProducts = service.getSimpleProducts();
    this.product = this.simpleProducts[0].ID;
    this.productsDataSource = new DataSource({
      store: {
        data: this.simpleProducts,
        type: 'array',
        key: 'ID',
      },
    });
  }

  addCustomItem(data: DxSelectBoxTypes.CustomItemCreatingEvent) {
    if (!data.text) {
      data.customItem = null;
      return;
    }

    const productIds = this.simpleProducts.map((item) => item.ID);
    const incrementedId = Math.max.apply(null, productIds) + 1;
    const newItem = {
      Name: data.text,
      ID: incrementedId,
    };

    data.customItem = this.productsDataSource.store().insert(newItem)
      .then(() => this.productsDataSource.load())
      .then(() => newItem)
      .catch((error) => {
        throw error;
      });
  }
}

bootstrapApplication(AppComponent, {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
  ],
});