Feature/demos update prettier

.github/instructions/demos-angular.instructions.md

@@ -0,0 +1,98 @@
+---
+applyTo: "**/apps/demos/Demos/**/Angular/**"
+---
+
+# Writing Angular demos
+
+Angular demos run without zone.js. Change detection is driven by signals, so state that the
+template reads and that changes at runtime must be a signal. New demos start from
+`pnpm run add-demo` (template: `apps/demos/utils/templates/Angular/`).
+
+## Rules
+
+1. **Standalone component.** One `AppComponent` with `imports: [...]`, started with
+   `bootstrapApplication(AppComponent)`. No `NgModule`, `platformBrowserDynamic`,
+   `BrowserModule`, `CommonModule`, `provideZoneChangeDetection` or `NgZone`.
+2. **DI.** Use `inject()` instead of constructor parameters, also in services.
+3. **State.** Use `signal()` for state that the template reads and that changes at runtime.
+   Read it as `x()` in the template, update it with `set()` / `update()`. Use plain
+   `readonly` fields or module constants for static data.
+4. **Derived values.** Use `computed()` instead of getters.
+5. **Two-way bindings.** Bind a signal: `[(value)]="selected"`, without `()`. Everywhere
+   else in the template, call it: `[disabled]="!selected()"`.
+6. **Control flow.** `@if` / `@for (item of items; track item.id)` / `@switch` instead of
+   `*ngIf` / `*ngFor` / `ngSwitch`. `@if (current(); as item)` keeps the inner markup the same.
+7. **No `ChangeDetectorRef`.** Make the state a signal instead of calling `detectChanges()` /
+   `markForCheck()`.
+8. **Streams.** Keep RxJS only for real streams (for example, SignalR pushes) and add
+   `takeUntilDestroyed()`. Otherwise use signals or `toSignal()`.
+9. **Inputs, outputs, queries.** `input()` / `input.required()`, `output()`,
+   `viewChild()` / `viewChild.required()` instead of `@Input`, `@Output` + `EventEmitter`,
+   `@ViewChild`.
+10. **Constructors.** If a constructor only assigns fields, replace it with field
+    initializers. Initializers run in declaration order, so a field can use only fields
+    declared above it. Keep a constructor (without parameters) only for real work at startup.
+11. **Type imports.** Import types with `import type { ... }` (`verbatimModuleSyntax` is on).
+
+## Example
+
+```ts
+import { Component, computed, enableProdMode, inject, signal } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { DxCheckBoxModule, DxDataGridModule } from 'devextreme-angular';
+import type { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { Service } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: './app.component.html',
+  providers: [Service],
+  imports: [DxCheckBoxModule, DxDataGridModule],
+})
+export class AppComponent {
+  readonly customers = inject(Service).getCustomers();
+
+  readonly showBorders = signal(true);
+
+  readonly selectedCount = signal(0);
+
+  readonly summary = computed(() => `Selected: ${this.selectedCount()}`);
+
+  onSelectionChanged({ selectedRowKeys }: DxDataGridTypes.SelectionChangedEvent) {
+    this.selectedCount.set(selectedRowKeys.length);
+  }
+}
+
+bootstrapApplication(AppComponent);
+```
+
+```html
+<dx-check-box text="Show borders" [(value)]="showBorders"></dx-check-box>
+<dx-data-grid
+  [dataSource]="customers"
+  [showBorders]="showBorders()"
+  (onSelectionChanged)="onSelectionChanged($event)"
+>
+  <dxo-data-grid-selection mode="multiple"></dxo-data-grid-selection>
+</dx-data-grid>
+<div>{{ summary() }}</div>
+```
+
+## Checks
+
+From `apps/demos`:
+
+```bash
+pnpm exec eslint Demos/<Widget>/<Demo>/Angular
+pnpm exec prettier --check Demos/<Widget>/<Demo>/Angular
+DEMO_BUNDLE_FILTER=<Widget>/<Demo> node utils/server/demo-bundle-angular.js
+pnpm run ts-check-ng   # strict template type check; no new errors in the changed demos
+```
+
+`DEMO_BUNDLE_FILTER` is matched as a substring of `<Widget>/<Demo>`, so do not add a
+trailing slash.
+Then open the demo (`pnpm run demos:start` from the repo root) and click through it.

CLAUDE.md

@@ -166,6 +166,8 @@ pnpm run convert-to-js split       # after React TypeScript changes
 pnpm run fix-lint
 ```
 
+Angular demos are zoneless and signal-based: follow `.github/instructions/demos-angular.instructions.md`.
+
 ## Code Style Conventions
 
 These rules apply to `packages/devextreme/js/**/*.d.ts` (see `.github/instructions/API_conventions.instructions.md`):

apps/demos/Demos/Accordion/Overview/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Accordion/Overview/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Accordion/Overview/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Accordion/Overview/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Accordion/Overview/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/Basics/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/Basics/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/Basics/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/Basics/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/Basics/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.html

@@ -1,10 +1,10 @@
 <dx-list (onItemClick)="itemClick($event)">
   @for (contact of contacts; track contact.name) {
-  <dxi-list-item>
-    <div>{{ contact.name }}</div>
-    <div>{{ contact.phone }}</div>
-    <div>{{ contact.email }}</div>
-  </dxi-list-item>
+    <dxi-list-item>
+      <div>{{ contact.name }}</div>
+      <div>{{ contact.phone }}</div>
+      <div>{{ contact.email }}</div>
+    </dxi-list-item>
   }
 </dx-list>
 <dx-action-sheet

apps/demos/Demos/ActionSheet/PopoverMode/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/PopoverMode/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/PopoverMode/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/PopoverMode/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ActionSheet/PopoverMode/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Autocomplete/Overview/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Autocomplete/Overview/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Autocomplete/Overview/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Autocomplete/Overview/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Autocomplete/Overview/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Box/Overview/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Box/Overview/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Box/Overview/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Box/Overview/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Box/Overview/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/Icons/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/Icons/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/Icons/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/Icons/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/Icons/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/PredefinedTypes/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/PredefinedTypes/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/PredefinedTypes/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/PredefinedTypes/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Button/PredefinedTypes/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ButtonGroup/Overview/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ButtonGroup/Overview/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ButtonGroup/Overview/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ButtonGroup/Overview/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/ButtonGroup/Overview/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Calendar/MultipleSelection/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Calendar/MultipleSelection/React/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Calendar/MultipleSelection/ReactJs/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Calendar/MultipleSelection/Vue/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Calendar/MultipleSelection/jQuery/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>
     <title>DevExtreme Demo</title>

apps/demos/Demos/Calendar/Overview/Angular/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DevExtreme Demo</title>