@dsivd/prestations-ng 19.1.2 → 19.2.0-beta.10

package/GOOD_PRACTICES.md

@@ -2,7 +2,9 @@
 
 > Ce guide décrit les bonnes pratiques pour développer une prestation avec `prestations-ng`.
 > Il a été mis à jour pour la version **v19+** : composants **standalone**, **signals** et
-> fonction **`inject`** (plus de modules, plus d'injection par constructeur).
+> fonction **`inject`** (plus de modules, plus d'injection par constructeur). Depuis la **v19.2**,
+> prestations-ng est **zoneless** : les exemples tiennent l'état de vos composants dans des signaux,
+> ce qui fonctionne avec ou sans zone.js (voir [Application zoneless](good-practices#application_zoneless)).
 >
 > 📚 Pour aller plus loin :
 > [ANGULAR_SIGNALS.md](ANGULAR_SIGNALS.md) · [COMPONENTS.md](COMPONENTS.md) · [UPGRADING_V19.md](UPGRADING_V19.md)
@@ -19,6 +21,10 @@
     - [La balise `<fieldset>` et `<legend>`](good-practices#la_balise__code__lt_fieldset_gt___code__et__code__lt_legend_gt___code_)
     - [Liseuse d'écran (afficher / masquer)](good-practices#liseuse_d__cran__afficher___masquer_)
     - [Une page prestations-ng](good-practices#une_page_prestations-ng)
+- [Application zoneless](good-practices#application_zoneless)
+    - [Afficher un état asynchrone](good-practices#afficher_un__tat_asynchrone)
+    - [Agir sur le DOM après le rendu](good-practices#agir_sur_le_dom_apr_s_le_rendu)
+    - [Tester un composant zoneless](good-practices#tester_un_composant_zoneless)
 - [Le routage de vos pages](good-practices#le_routage_de_vos_pages)
     - [Formulaire simple](good-practices#formulaire_simple)
     - [Formulaire complexe (sous-routes)](good-practices#formulaire_complexe__sous-routes_)
@@ -95,29 +101,25 @@ Ce qu'il ne faut **pas** faire :
 
 ```html
 <h1>...</h1>
-    <h3>...</h3>
-        <h2>...</h2>
-            <h6>...</h6>
-            ...
-        ...
-    ...
+<h3>...</h3>
+<h2>...</h2>
+<h6>...</h6>
+... ... ...
 ```
 
 Ce qu'il **faut** faire :
 
 ```html
 <h1>...</h1>
-    <section>
-        <h2>...</h2>
-            <h3>...</h3>
-                <h4>...</h4>
-                ...
-            ...
-    </section>
-        <h2>...</h2>
-        ...
-    <section>
-    ...
+<section>
+    <h2>...</h2>
+    <h3>...</h3>
+    <h4>...</h4>
+    ... ...
+</section>
+<h2>...</h2>
+...
+<section>...</section>
 ```
 
 Quelques attributs HTML utiles :
@@ -155,8 +157,7 @@ Exemple :
 <foehn-modal
     modalHeaderText="Modal dialog"
     modalSize="modal-lg"
-    [isModalVisible]="isModalVisible"
-    (isModalVisibleChange)="updateVisibilityStatus($event)"
+    [(isModalVisible)]="isModalVisible"
     [modalTriggerHtmlElement]="modalTrigger"
 >
     <!-- on utilise le déclencheur -->
@@ -164,6 +165,15 @@ Exemple :
 </foehn-modal>
 ```
 
+```ts
+// Un signal : la modale s'affiche et se masque aussi sans zone.js
+readonly isModalVisible = signal(false);
+
+openModal(): void {
+    this.isModalVisible.set(true);
+}
+```
+
 ### La balise `<label>`
 
 > ⚠️ Tous nos composants `foehn-input-*` disposent d'une balise label ([`<label>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/label))
@@ -216,32 +226,36 @@ Exemple :
 
 ```html
 <ul>
-  <li>un artichaut</li>
-  <li>Les trucs pour le gâteau
-  <!-- On voit que </li> n'est pas là -->
-    <ul>
-      <li>trois œufs</li>
-      <li>La génoise
-      <!-- Là on ouvre une autre liste -->
+    <li>un artichaut</li>
+    <li>
+        Les trucs pour le gâteau
+        <!-- On voit que </li> n'est pas là -->
         <ul>
-          <li>100g de sucre</li>
-          <li>un œuf</li>
-          <li>150g de farine</li>
+            <li>trois œufs</li>
+            <li>
+                La génoise
+                <!-- Là on ouvre une autre liste -->
+                <ul>
+                    <li>100g de sucre</li>
+                    <li>un œuf</li>
+                    <li>150g de farine</li>
+                </ul>
+            </li>
+            <!-- On ferme la liste la plus imbriquée -->
+            <li>200g de chocolat</li>
         </ul>
-      </li> <!-- On ferme la liste la plus imbriquée -->
-      <li>200g de chocolat</li>
-    </ul>
-  <!-- On ferme la liste imbriquée avec </li> -->
-  </li>
-  <li>De l'essuie-tout</li>
-  <li>A faire dans l'ordre pour une belle vaisselle
-    <ol>
-      <li>Remplir le lave vaisselle</li>
-      <li>Mettre une pastille pour lave vaisselle</li>
-      <li>Fermer la porte du lave vaisselle</li>
-      <li>Lancer le lave vaisselle</li>
-    </ol>
-  </li>
+        <!-- On ferme la liste imbriquée avec </li> -->
+    </li>
+    <li>De l'essuie-tout</li>
+    <li>
+        A faire dans l'ordre pour une belle vaisselle
+        <ol>
+            <li>Remplir le lave vaisselle</li>
+            <li>Mettre une pastille pour lave vaisselle</li>
+            <li>Fermer la porte du lave vaisselle</li>
+            <li>Lancer le lave vaisselle</li>
+        </ol>
+    </li>
 </ul>
 ```
 
@@ -262,18 +276,18 @@ Exemple :
 
 ```html
 <form>
-  <fieldset>
-    <legend>Choose your favorite monster</legend>
+    <fieldset>
+        <legend>Choose your favorite monster</legend>
 
-    <input type="radio" id="kraken" name="monster" value="K" />
-    <label for="kraken">Kraken</label><br />
+        <input type="radio" id="kraken" name="monster" value="K" />
+        <label for="kraken">Kraken</label><br />
 
-    <input type="radio" id="sasquatch" name="monster" value="S" />
-    <label for="sasquatch">Sasquatch</label><br />
+        <input type="radio" id="sasquatch" name="monster" value="S" />
+        <label for="sasquatch">Sasquatch</label><br />
 
-    <input type="radio" id="mothman" name="monster" value="M" />
-    <label for="mothman">Mothman</label>
-  </fieldset>
+        <input type="radio" id="mothman" name="monster" value="M" />
+        <label for="mothman">Mothman</label>
+    </fieldset>
 </form>
 ```
 
@@ -331,7 +345,10 @@ avec du texte pour les non-voyants.
         // ... vos composants foehn-* utilisés dans le template
     ],
 })
-export class PageOneComponent extends AbstractPageComponent<BusinessForm> implements OnInit {
+export class PageOneComponent
+    extends AbstractPageComponent<BusinessForm>
+    implements OnInit
+{
     ngOnInit(): void {
         super.ngOnInit();
         // point (2) : ajoutera le titre h1
@@ -361,7 +378,10 @@ export class PageOneComponent extends AbstractPageComponent<BusinessForm> implem
         <div class="row">
             <div class="col-md-8">
                 <!-- point (5) : toujours avoir un <h2> en premier dans votre page -->
-                <h2>{{ 'La_clé_du_dictionnaire_de_votre_titre_H2_ici' | fromDictionary }}</h2>
+                <h2>
+                    {{ 'La_clé_du_dictionnaire_de_votre_titre_H2_ici' |
+                    fromDictionary }}
+                </h2>
 
                 <!-- [VOS COMPOSANTS FOEHN ICI] -->
 
@@ -377,6 +397,126 @@ export class PageOneComponent extends AbstractPageComponent<BusinessForm> implem
 </div>
 ```
 
+## Application zoneless
+
+> ℹ️ Depuis la v19.2, prestations-ng n'a plus besoin de zone.js et nous vous recommandons de rendre
+> votre application zoneless (`provideZonelessChangeDetection()`, voir
+> [UPGRADING_V19.md](UPGRADING_V19.md#zoneless-optional-but-recommended)).
+>
+> Sans zone.js, Angular ne rafraîchit un composant que lorsqu'il est prévenu d'un changement :
+>
+> - un listener de son template a été appelé (`(click)`, `(modelChange)`, `(userInput)`, ...), y
+>   compris les double-bindings `[(model)]`
+> - un signal lu par son template a changé (`signal()`, `computed()`, `input()`, `model()`,
+>   `toSignal()`, ...)
+> - `ChangeDetectorRef.markForCheck()` a été appelé, ce que fait le pipe `async` lorsqu'un observable
+>   émet
+
+### Afficher un état asynchrone
+
+> ⚠️ Un champ modifié ailleurs (dans un `subscribe()`, un `setTimeout()`, une `Promise`, un
+> callback, ...) n'est plus affiché tant que rien d'autre ne rafraîchit le composant. Tenez-le dans
+> un **signal**.
+
+Ce qu'il ne faut **pas** faire :
+
+```ts
+isLoading = true;
+
+ngOnInit(): void {
+    this.myService.load().subscribe(() => {
+        this.isLoading = false; // pas affiché sans zone.js
+    });
+}
+```
+
+Ce qu'il **faut** faire :
+
+```ts
+readonly isLoading = signal(true);
+
+ngOnInit(): void {
+    this.myService.load().subscribe(() => {
+        this.isLoading.set(false);
+    });
+}
+```
+
+```html
+@if (isLoading()) {
+<p>{{ 'page.loading' | fromDictionary }}</p>
+}
+```
+
+> 💡 Pour un observable affiché tel quel, `toSignal(this.myService.load())` ou le pipe `async` font
+> le travail pour vous.
+
+Dans vos pages (`AbstractPageComponent`), prestations-ng rafraîchit la page lorsqu'il charge `form`
+et `reference`. Si vous modifiez vous-même le formulaire dans un callback asynchrone, appelez
+`markForCheck()` ensuite :
+
+```ts
+private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
+ngOnInit(): void {
+    super.ngOnInit();
+    this.sessionInfoWithApplicationService.prefillForm((info) => {
+        this.form.email = info?.email ?? null;
+        this.changeDetectorRef.markForCheck();
+    });
+}
+```
+
+### Agir sur le DOM après le rendu
+
+> ⚠️ `NgZone` (`onStable`, `onMicrotaskEmpty`, `run()`, ...) ne fonctionne plus sans zone.js, et un
+> `setTimeout()` n'attend pas le rendu. Pour agir sur le DOM rendu (focus, scroll, ...), utilisez
+> `afterNextRender()`.
+
+```ts
+readonly detailsVisible = signal(false);
+readonly detailsField = viewChild<ElementRef<HTMLElement>>('detailsField');
+
+private readonly injector = inject(Injector);
+
+showDetails(): void {
+    this.detailsVisible.set(true);
+    // Le champ n'existe qu'une fois le détail rendu
+    afterNextRender(() => this.detailsField()?.nativeElement.focus(), {
+        injector: this.injector,
+    });
+}
+```
+
+### Tester un composant zoneless
+
+> ⚠️ `fixture.detectChanges()` **force** le rafraîchissement : un composant qui oublie de prévenir
+> Angular (champ au lieu d'un signal, `markForCheck()` manquant, ...) passe le test, mais n'est pas
+> rafraîchi dans l'application. Laissez Angular rafraîchir le composant, comme en production, avec
+> `await fixture.whenStable()`.
+
+```ts
+it('should display the details', async () => {
+    fixture.componentRef.setInput('showDetails', true);
+    await fixture.whenStable();
+
+    expect(fixture.nativeElement.querySelector('.details')).not.toBeNull();
+});
+```
+
+`await fixture.whenStable()` attend aussi les tâches en cours, comme les requêtes HTTP : le test ne
+se termine pas avant elles (sinon `NG0205: Injector has already been destroyed`).
+
+Gardez `fixture.detectChanges()` pour :
+
+- vérifier un état intermédiaire, avant la fin d'un traitement asynchrone
+- les tests avec `vi.useFakeTimers()` : le rafraîchissement d'Angular passe par des timers, qu'il
+  faut avancer (`await vi.advanceTimersByTimeAsync(...)`), sinon `whenStable()` ne se termine pas
+
+> 💡 Pour que le test passe par le même chemin que l'utilisateur, déclenchez les événements dans le
+> DOM (`input.dispatchEvent(new Event('change'))`, `button.click()`, ...) plutôt que d'appeler les
+> méthodes du composant ou de ses services.
+
 ## Le routage de vos pages
 
 ### Formulaire simple
@@ -390,13 +530,21 @@ export const routes: Routes = [
         component: PageWrapperComponent,
         data: { root: true },
         children: [
-            { path: '', component: PageOneComponent, canActivate: [GesdemLoaderGuard] },
+            {
+                path: '',
+                component: PageOneComponent,
+                canActivate: [GesdemLoaderGuard],
+            },
             { path: '404', component: FoehnNotfoundComponent },
             { path: 'erreur', component: GesdemErrorComponent },
             {
                 path: ':reference',
                 children: [
-                    { path: 'page-1', component: PageOneComponent, data: { order: 1 } },
+                    {
+                        path: 'page-1',
+                        component: PageOneComponent,
+                        data: { order: 1 },
+                    },
                     // {...},
                     // ...
                     { path: 'erreur', component: GesdemErrorComponent },
@@ -431,7 +579,9 @@ export const routes: Routes = [
             {
                 path: 'welcome',
                 loadChildren: () =>
-                    import('./modules/welcome/welcome.routes').then((m) => m.welcome_routes),
+                    import('./modules/welcome/welcome.routes').then(
+                        (m) => m.welcome_routes,
+                    ),
             },
             {
                 path: 'inscription',
@@ -443,7 +593,11 @@ export const routes: Routes = [
             // {...},
             // ...
             // recovery link should redirect to /inscription/reference
-            { path: ':reference', redirectTo: 'inscription/:reference', pathMatch: 'full' },
+            {
+                path: ':reference',
+                redirectTo: 'inscription/:reference',
+                pathMatch: 'full',
+            },
             { path: '', redirectTo: 'welcome', pathMatch: 'full' },
             { path: '404', component: FoehnNotfoundComponent },
             { path: '**', redirectTo: '/404', pathMatch: 'full' },
@@ -475,12 +629,20 @@ export const inscription_routes: Routes = [
         path: '',
         data: { root: true },
         children: [
-            { path: '', component: PageOneComponent, canActivate: [GesdemLoaderGuard] },
+            {
+                path: '',
+                component: PageOneComponent,
+                canActivate: [GesdemLoaderGuard],
+            },
             { path: 'erreur', component: GesdemErrorComponent },
             {
                 path: ':reference',
                 children: [
-                    { path: 'page-1', component: PageOneComponent, data: { order: 1 } },
+                    {
+                        path: 'page-1',
+                        component: PageOneComponent,
+                        data: { order: 1 },
+                    },
                     // {...},
                     // ...
                     { path: 'erreur', component: GesdemErrorComponent },
@@ -513,14 +675,14 @@ Votre composant doit :
 1. `selector` devrait commencer par `"app-..."` pour éviter d'éventuels conflits de nommage
 2. avoir un `providers`
 3. étendre `FoehnInputComponent` et vous devez lui préciser votre modèle de données
-4. répartir les attributs de votre modèle de données dans des variables publiques utilisées dans
+4. répartir les attributs de votre modèle de données dans des **signaux** publics utilisés dans
    votre HTML
 5. implémenter une fonction `update` (ici ce sera `updateDate`) qui fera appel à `updateNgModel` pour
    maintenir la synchronisation de votre modèle de données avec votre page
 6. implémenter une fonction `handleUserInput` qui fera appel à `handleChange` pour continuer à
    notifier le parent des changements de comportement de votre composant
 7. implémenter une fonction `onModelChange` qui vous permettra d'initialiser correctement les
-   variables publiques correspondant à votre modèle
+   signaux correspondant à votre modèle
 8. implémenter une fonction `getValidValue` afin de reconstruire votre modèle de données avant de le
    retransmettre à votre page et retourner `null` si tous les attributs de votre objet sont vides (ça
    c'est pour que Java soit content)
@@ -530,11 +692,14 @@ Votre composant doit :
 > - **Pas de `multi: true`** dans le `providers` (retiré depuis la migration standalone).
 > - Les `imports` du composant se déclarent **directement** dans le décorateur `@Component`. Chaque
 >   composant charge ce dont il a besoin (voir `foehn-input-date` dans ce projet).
+> - L'état affiché par le composant est tenu dans des **signaux** (point 4) : `onModelChange` est
+>   appelé lorsque le modèle change, parfois en dehors d'un événement du template, et un simple champ
+>   ne serait alors pas affiché sans zone.js.
 
 `input-date.component.ts`
 
 ```ts
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, signal } from '@angular/core';
 
 import { FoehnInputComponent } from '../foehn-input/foehn-input.component';
 import { FoehnInputNumberComponent } from '../foehn-input/foehn-input-number.component';
@@ -563,10 +728,10 @@ import { SdkDictionaryPipe } from '../sdk-dictionary/sdk-dictionary.pipe';
 export class InputDateComponent extends FoehnInputComponent<number[]> {
     // point (3) : extends FoehnInputComponent<number[]>
 
-    // point (4) : les attributs de votre modèle répartis en variables publiques
-    day: string;
-    month: string;
-    year: string;
+    // point (4) : les attributs de votre modèle répartis en signaux publics
+    readonly day = signal<string | null>(null);
+    readonly month = signal<string | null>(null);
+    readonly year = signal<string | null>(null);
 
     // point (5)
     updateDate(): void {
@@ -585,21 +750,25 @@ export class InputDateComponent extends FoehnInputComponent<number[]> {
     }
 
     // point (7)
-    override onModelChange(value: number[]): void {
+    override onModelChange(value: number[] | null): void {
         if (value && value.length > 2) {
-            this.year = this.toString(value[0]);
-            this.month = this.toString(value[1]);
-            this.day = this.toString(value[2]);
+            this.year.set(this.toString(value[0]));
+            this.month.set(this.toString(value[1]));
+            this.day.set(this.toString(value[2]));
         } else if (!value) {
-            this.year = null;
-            this.month = null;
-            this.day = null;
+            this.year.set(null);
+            this.month.set(null);
+            this.day.set(null);
         }
     }
 
     // point (8)
     getValidValue(): number[] | null | undefined {
-        if (this.isEmpty(this.day) && this.isEmpty(this.month) && this.isEmpty(this.year)) {
+        if (
+            this.isEmpty(this.day()) &&
+            this.isEmpty(this.month()) &&
+            this.isEmpty(this.year())
+        ) {
             if (this.model_ !== undefined) {
                 return null;
             }
@@ -607,7 +776,11 @@ export class InputDateComponent extends FoehnInputComponent<number[]> {
             return undefined;
         }
 
-        return [this.toNumber(this.year), this.toNumber(this.month), this.toNumber(this.day)];
+        return [
+            this.toNumber(this.year()),
+            this.toNumber(this.month()),
+            this.toNumber(this.day()),
+        ];
     }
 
     // ...code
@@ -619,7 +792,8 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
 1. avoir un `id` qui concatène l'appel à la fonction `buildId()` et le nom de l'attribut de votre objet
 2. avoir un `name` qui concatène l'input **signal** `name()` et le nom de l'attribut de votre objet
 3. avoir un `label`
-4. utiliser votre variable publique comme model en double-binding (banana in the box)
+4. utiliser votre signal public comme model en double-binding (banana in the box) : `[(model)]="day"`
+   lit et écrit le signal (sans les parenthèses)
 5. faire appel à `updateDate()` lors du déclenchement de l'événement `(modelChange)`
 6. faire appel à `handleUserInput()` lors du déclenchement de l'événement `(userInput)`
 
@@ -694,15 +868,17 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
     >
         <!-- (facultatif) Seulement si vous souhaitez afficher un label/legend global à votre composant -->
         @if (!!label()) {
-            <legend
-                [class.visually-hidden]="isLabelSrOnly()"
-                [class.vd-p]="!isLabelSrOnly()"
+        <legend
+            [class.visually-hidden]="isLabelSrOnly()"
+            [class.vd-p]="!isLabelSrOnly()"
+        >
+            <span [innerHTML]="label()"></span>
+            @if (!required() && !hideNotRequiredExtraLabel()) {
+            <span aria-hidden="true"
+                >{{ 'foehn-input.optional' | fromDictionary }}</span
             >
-                <span [innerHTML]="label()"></span>
-                @if (!required() && !hideNotRequiredExtraLabel()) {
-                    <span aria-hidden="true">{{ 'foehn-input.optional' | fromDictionary }}</span>
-                }
-            </legend>
+            }
+        </legend>
         }
 
         <!-- (obligatoire) -->
@@ -710,11 +886,11 @@ Chaque `foehn-input-*` utilisé dans votre vue doit :
 
         <!-- (facultatif) Seulement si vous souhaitez pouvoir afficher un helpText global au composant -->
         @if (helpText()) {
-            <small
-                [attr.id]="buildId() + 'Help'"
-                class="text-secondary"
-                [innerHTML]="helpText()"
-            ></small>
+        <small
+            [attr.id]="buildId() + 'Help'"
+            class="text-secondary"
+            [innerHTML]="helpText()"
+        ></small>
         }
 
         <!-- ...vos foehn-input-* ici -->
@@ -769,13 +945,18 @@ Voici un exemple de page de formulaire contenant cette méthode (1) :
         // ... vos composants foehn-*
     ],
 })
-export class VotrePageComponent extends AbstractPageComponent<BusinessForm> implements OnInit {
+export class VotrePageComponent
+    extends AbstractPageComponent<BusinessForm>
+    implements OnInit
+{
     // vos propres dépendances : inject() au lieu du constructor
     private readonly metaService = inject(MetaService);
 
     ngOnInit(): void {
         super.ngOnInit();
-        this.setPageTitle(this._dictionaryService.getKeySync('votre-page.title'));
+        this.setPageTitle(
+            this._dictionaryService.getKeySync('votre-page.title'),
+        );
     }
 
     newForm(): BusinessForm {
@@ -889,37 +1070,38 @@ devra lui aussi remonter l'événement.
     tabindex="-1"
 >
     @if (label() && type() !== 'hidden') {
-        <label
-            [attr.for]="buildChildId()"
-            [class]="'form-label ' + (isLabelSrOnly() ? 'visually-hidden' : (labelStyleModifier() ?? ''))"
+    <label
+        [attr.for]="buildChildId()"
+        [class]="'form-label ' + (isLabelSrOnly() ? 'visually-hidden' : (labelStyleModifier() ?? ''))"
+    >
+        {{ label() }} @if (!required() && !hideNotRequiredExtraLabel()) {
+        <span aria-hidden="true"
+            >{{ 'foehn-input.optional' | fromDictionary }}</span
         >
-            {{ label() }}
-            @if (!required() && !hideNotRequiredExtraLabel()) {
-                <span aria-hidden="true">{{ 'foehn-input.optional' | fromDictionary }}</span>
-            }
-        </label>
+        }
+    </label>
     }
 
     <foehn-validation-alerts [component]="this" />
 
     @if (helpText()) {
-        <small
-            [attr.id]="buildChildId() + 'Help'"
-            class="form-text text-secondary"
-            [innerHTML]="helpText()"
-        ></small>
+    <small
+        [attr.id]="buildChildId() + 'Help'"
+        class="form-text text-secondary"
+        [innerHTML]="helpText()"
+    ></small>
     }
 
     <!-- (1) votre boucle @for + track (identifiant unique) -->
-    @for (vehicule of vehicules; track vehicule.id; let i = $index) {
-        <!-- (2) votre composant réutilisable -->
-        <app-vehicule-item
-            [name]="name() + '[' + i + ']'"
-            [(model)]="vehicule"
-            (modelChange)="updateVehiculesList($event, i)"
-            (userInput)="handleUserInput($event, i)"
-            (removedVehicule)="handleRemovedVehicule(i)"
-        />
+    @for (vehicule of vehicules(); track vehicule.id; let i = $index) {
+    <!-- (2) votre composant réutilisable -->
+    <app-vehicule-item
+        [name]="name() + '[' + i + ']'"
+        [model]="vehicule"
+        (modelChange)="updateVehiculesList($event, i)"
+        (userInput)="handleUserInput($event, i)"
+        (removedVehicule)="handleRemovedVehicule(i)"
+    />
     }
 
     <button class="btn btn-primary mt-2" (click)="addVehicule()">
@@ -930,6 +1112,9 @@ devra lui aussi remonter l'événement.
 
 > 💡 Le `name` est un input signal : `[name]="name() + '[' + i + ']'"` (et non plus
 > `[name]="name + '[' + i + ']'"`).
+>
+> 💡 La variable d'une boucle `@for` ne peut pas être modifiée : on passe l'élément avec `[model]` et
+> on remplace l'élément de la liste dans `updateVehiculesList()` (appelée par `(modelChange)`).
 
 `vehicules-list.component.ts` remonte à son tour l'événement (1) au parent (`AbstractPageComponent`)
 ainsi que supprimer l'élément de la liste (2). C'est aussi ici que vous pouvez gérer l'ajout d'un
@@ -954,15 +1139,29 @@ ainsi que supprimer l'élément de la liste (2). C'est aussi ici que vous pouvez
 export class VehiculesListComponent extends FoehnInputComponent<Vehicule[]> {
     readonly removedVehicule = output<void>(); // (1) événement à remonter au parent
 
-    vehicules: Vehicule[] = []; // Tableau contenant vos éléments répétables
+    // Signal contenant vos éléments répétables : il est remplacé, jamais modifié sur place
+    readonly vehicules = signal<Vehicule[]>([]);
+
+    updateVehiculesList(vehicule: Vehicule, index: number): void {
+        this.vehicules.update((vehicules) =>
+            vehicules.map((item, i) => (i === index ? vehicule : item)),
+        );
+        this.getValidValueAndUpdateNgModel(); // Mise à jour de votre modèle
+    }
 
     handleRemovedVehicule(index: number): void {
         // (2) votre fonction de suppression de l'élément ainsi que la transmission de l'évènement
-        this.vehicules.splice(index, 1); // suppression de l'élément
+        this.vehicules.update((vehicules) =>
+            vehicules.filter((_vehicule, i) => i !== index),
+        ); // suppression de l'élément
         this.getValidValueAndUpdateNgModel(); // Mise à jour de votre modèle
         this.removedVehicule.emit(); // (1) on remonte l'évènement
     }
 
+    override onModelChange(value: Vehicule[] | null): void {
+        this.vehicules.set(value ?? []);
+    }
+
     addVehicule(): void {
         // (3) Gestion de l'ajout d'un élément
         // ...code
@@ -992,7 +1191,11 @@ l'événement de suppression (2).
     />
     <!-- (1) Utilisation de votre liste - (2) Appel de la méthode qui sauvegardera les données dans GESDEM afin de rafraîchir les erreurs -->
 
-    <foehn-navigation id="navigation" (onPrevious)="previous()" (onNext)="send()" />
+    <foehn-navigation
+        id="navigation"
+        (onPrevious)="previous()"
+        (onNext)="send()"
+    />
 </foehn-form>
 ```
 
@@ -1003,7 +1206,10 @@ formulaire et ainsi rafraîchir l'index.
 @Component({
     // ...
 })
-export class DemandePageComponent extends AbstractPageComponent<BusinessForm> implements OnInit {
+export class DemandePageComponent
+    extends AbstractPageComponent<BusinessForm>
+    implements OnInit
+{
     // ...code
 
     handleRemovedVehicule(): void {
@@ -1066,10 +1272,7 @@ export class BusinessForm {
     name="identification.lastName"
 />
 
-<foehn-boolean-checkbox
-    [(model)]="form.acceptCookies"
-    name="acceptCookies"
-/>
+<foehn-boolean-checkbox [(model)]="form.acceptCookies" name="acceptCookies" />
 <!-- 1 niveau de profondeur -->
 ```
 
@@ -1169,7 +1372,9 @@ export class ... extends AbstractPageComponent<YOUR_MODEL> implements OnInit {
     save(): void {
         // Activer l'affichage des erreurs
         this._validationHandlerService.shouldDisplayErrors(true);
-        // Appel au back pour faire votre validation
+        // Appel au back pour faire votre validation. Le callback ne modifie aucun champ de la page :
+        // les services de prestations-ng (growl, erreurs) rafraîchissent eux-mêmes l'affichage, aussi
+        // sans zone.js. Un état propre à la page modifié ici devrait être un signal.
         this.httpClient
             .post<PostResponse>('api_url_ici', votre_objet)
             .subscribe((response: PostResponse) => {