### Quick start with zoneless directives

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Example showing how to use signal-based directives for text boxes and data grids in an Angular component.

```ts
import { Component, signal } from '@angular/core';
import { DxTextBoxModule } from 'devextreme-angular/ui/text-box';
import { DxDataGridModule } from 'devextreme-angular/ui/data-grid';
import {
  DxTextBoxValueDirective,
  DxDataGridSelectedRowKeysDirective,
} from 'ngx-devextreme-zoneless';

@Component({
  imports: [DxTextBoxModule, DxDataGridModule,
            DxTextBoxValueDirective, DxDataGridSelectedRowKeysDirective],
  template: `
    <dx-text-box [(dxValue)]="search" [dxValueDebounce]="300" />
    <dx-data-grid [(dxSelectedRowKeys)]="selected" [dataSource]="orders" keyExpr="id">
      <dxo-selection mode="multiple" />
    </dx-data-grid>
  `,
})
export class OrdersComponent {
  readonly search = signal('');
  readonly selected = signal<readonly number[]>([]); // TKey inferred as number
  readonly orders = [{ id: 1 }, { id: 2 }];
}
```

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

### Install ngx-devextreme-zoneless

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Use npm to install the package in your Angular project.

```bash
npm i ngx-devextreme-zoneless
```

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

### Binding Generic Widget Options

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Example of binding two-way options for any DevExtreme widget.

```typescript
// Any option of any widget, two-way — e.g. Menu, ButtonGroup, Toolbar, ...:
readonly disabled = dxOptionSignal(this.menu, 'disabled');
```

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

### Accessing Scheduler Events

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Example of tracking appointment lifecycle events in a Scheduler component.

```typescript
// Scheduler beyond [(dxCurrentDate)] / [(dxCurrentView)] — appointment
// lifecycle as signals:
private readonly scheduler = inject(DxSchedulerComponent, { self: true });
readonly appointmentAdded = dxEventSignal(this.scheduler, 'appointmentAdded');
```

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

### Accessing PivotGrid Events

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Example of accessing events for components without two-way options.

```typescript
// PivotGrid — no two-way options (its mutable state lives in the
// PivotGridDataSource), but every event and option is reachable, typed:
private readonly pivot = inject(DxPivotGridComponent, { self: true });
readonly cellClick = dxEventSignal(this.pivot, 'cellClick');
readonly contextMenu = dxEventSignal(this.pivot, 'contextMenuPreparing');
```

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

### Handling Sortable Events

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Example of using events to drive state mutations in a Sortable component.

```typescript
// Sortable (e.g. a Kanban board built from dx-sortable + lists) — purely
// event-driven, so state stays in your signals and events drive mutations:
private readonly sortable = viewChild(DxSortableComponent);
readonly reorder = dxEventSignal(this.sortable, 'reorder');
constructor() {
  effect(() => {
    const e = this.reorder();
    if (e) this.cards.update((cards) => moveItem(cards, e.fromIndex, e.toIndex));
  });
}
```

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

### Development Commands

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Standard npm scripts for building, type checking, and verifying the project.

```bash
npm run build               # ng-packagr build → dist/
npm run typecheck:examples  # strict-template check of examples/ + type contract tests
npm run verify              # both
npm run smoke               # runtime smoke test app on http://localhost:4299
```

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

### Using Composition API with DevExtreme Components

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Demonstrates binding options, events, and accessing widget instances using injection-context functions within an Angular component.

```typescript
import {
  bindDxOption, dxOptionSignal, dxEventSignal, injectDxInstance,
} from 'ngx-devextreme-zoneless';

@Component({ /* ... */ })
export class MyComponent {
  // On the same element (inside a directive):
  private readonly textBox = inject(DxTextBoxComponent, { self: true });

  // Two-way signal for any option — names & types from DevExtreme Properties:
  readonly placeholder = dxOptionSignal(this.textBox, 'placeholder');
  readonly mode = dxOptionSignal(this.textBox, 'mode', { initialValue: 'search' });

  // Latest payload of any widget event:
  readonly focusOut = dxEventSignal(this.textBox, 'focusOut');

  // Works with view children too (pass the viewChild signal itself):
  private readonly grid = viewChild(DxDataGridComponent<Order, number>);
  readonly filter = dxOptionSignal(this.grid, 'filterValue');

  // Bind an existing signal to an option:
  readonly keys = signal<number[] | undefined>([]);
  constructor() {
    bindDxOption(this.grid, 'selectedRowKeys', this.keys);
  }

  // The raw widget instance as a signal (undefined until created):
  readonly widget = injectDxInstance(DxTextBoxComponent);
}
```

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

### Zoneless Adapter Data Flow

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Visual representation of the signal-based synchronization between Angular signals and DevExtreme widget options.

```text
Angular signal  ──effect──▶  widget option / method
Angular signal  ◀──set────  widget event (optionChanged, selectionChanged, …)
```

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

### Directive Usage

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Directives provide two-way binding for DevExtreme component properties, such as value, selection, and visibility, using Angular signals.

```APIDOC
## Directive Usage

### Description
Directives like `[(dxValue)]`, `[(dxSelectedRowKeys)]`, and `[(dxVisible)]` allow for reactive two-way binding between DevExtreme component states and Angular signals.

### Usage
- **[(dxValue)]**: Used for editors to bind values. Supports `[dxValueDebounce]` (ms) and `[dxValueEqual]` (custom comparer).
- **[(dxSelectedRowKeys)]**: Used for data grids and lists to manage selection.
- **[(dxVisible)]**: Used for overlays (popups, tooltips, etc.) to track visibility state.

### Example
```ts
<dx-text-box [(dxValue)]="search" [dxValueDebounce]="300" />
<dx-data-grid [(dxSelectedRowKeys)]="selected" [dataSource]="orders" />
```
```

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

### Accessing Type Helpers

Source: https://github.com/caffeinatedcoder/ngx-devextreme-zoneless/blob/main/README.md

Use these exported types to ensure type safety for DevExtreme widget options, events, and values within Angular components.

```ts
DxHostOptionName<DxTextBoxComponent>          // 'value' | 'placeholder' | 'mode' | ...
DxHostOptionValue<DxTextBoxComponent, 'mode'> // 'email' | 'password' | ... | undefined
DxHostEventName<DxDataGridComponent>          // 'rowClick' | 'selectionChanged' | ...
DxHostEventArg<DxTextBoxComponent, 'valueChanged'>
DxHostValue<DxCheckBoxComponent>              // boolean | null
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.