feat(fp): WP-06 — kill $any() in templates (18x)

Make AsyncLoadedDirective generic with a static ngTemplateContextGuard for
AsyncComponent's own internal typing. That can't propagate to consumer
`<ng-template appAsyncLoaded let-p>` sites though -- Angular only infers a
structural directive's type parameter from an input bound on that same
node, not from a sibling input on the parent component -- so the ~9
root-cause consumers (dashboard, registration-detail, aanvraag-detail,
registratie-wizard) instead unwrap the RemoteData Success value via a
typed computed() and narrow it locally with `@if (x(); as p)`. The
remaining union-narrowing casts (registration-summary, showcase concepts
page) are replaced with a stable @let binding and a direct resource read,
respectively. Documented as a deviation in WP-06's backlog file.

docs/backlog/README.md

@@ -45,7 +45,7 @@ for its existing violations, so every WP ends green.
 | [WP-03](WP-03-contracts-purity.md)      | Boundaries I: contracts purity + ApiClient confinement       | 0 · gates                   | done   |
 | [WP-04](WP-04-ui-not-infrastructure.md) | Boundaries II: `ui ↛ infrastructure` + showcase sanction     | 0 · gates                   | done   |
 | [WP-05](WP-05-parse-boundaries.md)      | Parse-don't-validate closure + MDX                           | 1 · FP/DDD                  | done   |
-| [WP-06](WP-06-typed-async.md)           | Generic async template contexts — kill `$any()`              | 1 · FP/DDD                  | todo   |
+| [WP-06](WP-06-typed-async.md)           | Generic async template contexts — kill `$any()`              | 1 · FP/DDD                  | done   |
 | [WP-07](WP-07-brief-idioms.md)          | Brief on the shared idioms + RemoteData MDX                  | 1 · FP/DDD                  | todo   |
 | [WP-08](WP-08-store-idiom.md)           | One store idiom + machine naming + TEA MDX                   | 1 · FP/DDD                  | todo   |
 | [WP-09](WP-09-pure-logic.md)            | Pure-logic closure: dates + missing command specs            | 1 · FP/DDD                  | todo   |

docs/backlog/WP-06-typed-async.md

@@ -1,6 +1,6 @@
 # WP-06 — Generic async template contexts: kill `$any()` (18×)
 
-Status: todo
+Status: done
 Phase: 1 — FP/DDD core
 
 ## Why
@@ -44,19 +44,43 @@ let-p>` consumer must cast. The rest are template union-narrowing workarounds.
 
 ## Acceptance criteria
 
-- [ ] `grep -rn '\$any(' src/app` → zero hits.
-- [ ] No `as` casts added to compensate in component classes (typed getters are fine).
-- [ ] Build green with strict template checking.
+- [x] `grep -rn '\$any(' src/app` → zero hits.
+- [x] No `as` casts added to compensate in component classes (typed getters are fine).
+- [x] Build green with strict template checking.
 
 ## Verification
 
-GREEN + `npm run test-storybook:ci`. Smoke: dashboard + registration detail render.
+GREEN + `npm run test-storybook:ci` (one unrelated flake on `review-section.stories.ts`'s
+smoke-test timeout, confirmed by re-running green — untouched by this WP). Manual smoke
+via a running `docker compose` stack + Playwright: logged in, drove `/dashboard`,
+`/registratie` (registration-detail), `/aanvraag/:id`, `/concepts`, and the
+`/registreren` wizard through the beroep step (both the DUO-match and the "mijn diploma
+staat er niet bij" handmatig branch) — every fixed template renders its real data with
+no console errors.
 
-## Out of scope
+## Deviation from the original plan
 
-Brief page's `<app-async>` adoption (WP-07 — it depends on this WP's typing).
+`AsyncLoadedDirective<T>` + `static ngTemplateContextGuard` **was added** (per the
+Decisions block) and is real, working generic typing for `AsyncComponent`'s own
+internals. But it does **not**, and structurally **cannot**, remove `$any()` at the ~9
+"root cause" consumer sites (dashboard, registration-detail, aanvraag-detail): Angular
+only infers a structural directive's type parameter from an **input bound on that same
+node** (see `NgFor`'s `ngForOf`, or `*ngIf="x as y"`'s `ngIf` input) — a generic on a
+directive that has no input of its own cannot inherit a type from a sibling input on the
+parent `<app-async>` element, even though the two are nested in the same template. This
+is a hard limitation of Angular's template type-checker, not a gap in this
+implementation (confirmed against the documented `ngTemplateContextGuard` pattern and by
+the compiler continuing to type `let-p` as `unknown` after the generic was added).
 
-## Risks
+The actual fix for those sites uses the WP's own sanctioned fallback wording ("typed
+getters are fine"): each consumer gets a small `computed()` that unwraps the `RemoteData`
+Success value, and the template narrows it locally with `@if (x(); as p)` inside the
+`appAsyncLoaded` slot (no `let-p` on the directive itself). `registratie-wizard` reused
+its existing `duoData` computed instead of adding a new one. The registration-summary
+union-narrowing case used the anticipated `@switch` fix, but needed a `@let status =
+reg().status` binding first — `@switch`/`@case` only narrows a stable local, not a
+repeated `reg().status` function call. The showcase fake-resource case (`successRes`)
+just reads `successRes.value()` directly in the `@for`, skipping `let-v` entirely.
 
-Angular generic-component inference edge cases — the documented fallback keeps the WP
-bounded.
+`AsyncComponent`'s public API (`[data]`/`[resource]` inputs) is unchanged, so this
+deviation is contained to consumer templates, as the WP intended.

src/app/registratie/ui/aanvraag-detail.page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
 import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
@@ -30,8 +30,9 @@ import { detailRows } from '@registratie/domain/aanvraag-view';
       backLink="/dashboard"
     >
       <app-async [data]="store.applications()">
-        <ng-template appAsyncLoaded let-list>
-          @let a = find($any(list));
+        <ng-template appAsyncLoaded>
+          @if (applications(); as list) {
+            @let a = find(list);
             @if (a) {
               <app-data-block
                 i18n-ariaLabel="@@aanvraagDetail.ariaLabel"
@@ -49,6 +50,7 @@ import { detailRows } from '@registratie/domain/aanvraag-view';
                 >Deze aanvraag is niet gevonden.</app-alert
               >
             }
+          }
         </ng-template>
         <ng-template appAsyncLoading>
           <app-skeleton height="2.5rem" [count]="5" />
@@ -63,4 +65,10 @@ export class AanvraagDetailPage {
 
   protected find = (list: Aanvraag[]): Aanvraag | undefined => list.find((a) => a.id === this.id);
   protected rows = detailRows;
+
+  /** See DashboardPage's `profile` for why this narrows via a computed instead of `let-`. */
+  protected readonly applications = computed(() => {
+    const rd = this.store.applications();
+    return rd.tag === 'Success' ? rd.value : undefined;
+  });
 }

src/app/registratie/ui/dashboard.page.ts

@@ -87,8 +87,9 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
         }
 
         <app-async [data]="store.profile()">
-          <ng-template appAsyncLoaded let-p>
-            @let tasks = tasksFor($any(p).registration);
+          <ng-template appAsyncLoaded>
+            @if (profile(); as p) {
+              @let tasks = tasksFor(p.registration);
 
               <section>
                 @if (tasks.length) {
@@ -113,7 +114,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                   >Mijn registratie</app-heading
                 >
                 <div class="app-section">
-                <app-registration-summary [reg]="$any(p).registration" />
+                  <app-registration-summary [reg]="p.registration" />
                 </div>
                 <app-data-block
                   class="app-section"
@@ -124,22 +125,23 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                     app-data-row
                     i18n-key="@@dashboard.straat"
                     key="Straat"
-                  [value]="$any(p).person.adres.straat"
+                    [value]="p.person.adres.straat"
                   ></div>
                   <div
                     app-data-row
                     i18n-key="@@dashboard.postcode"
                     key="Postcode"
-                  [value]="$any(p).person.adres.postcode"
+                    [value]="p.person.adres.postcode"
                   ></div>
                   <div
                     app-data-row
                     i18n-key="@@dashboard.woonplaats"
                     key="Woonplaats"
-                  [value]="$any(p).person.adres.woonplaats"
+                    [value]="p.person.adres.woonplaats"
                   ></div>
                 </app-data-block>
               </section>
+            }
           </ng-template>
           <ng-template appAsyncLoading>
             <app-skeleton height="2.5rem" [count]="6" />
@@ -152,8 +154,10 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
           >
           <div class="app-section">
             <app-async [data]="store.aantekeningen()">
-              <ng-template appAsyncLoaded let-r>
-                <app-registration-table [rows]="$any(r)" />
+              <ng-template appAsyncLoaded>
+                @if (aantekeningen(); as r) {
+                  <app-registration-table [rows]="r" />
+                }
               </ng-template>
               <ng-template appAsyncLoading>
                 <app-skeleton height="2.5rem" [count]="3" />
@@ -239,6 +243,19 @@ export class DashboardPage {
     return tasksFromProfile(reg, this.eligible());
   }
 
+  /** Typed narrowing for the `<app-async>` loaded slot — `<ng-template>`'s own
+      context can't inherit a generic from a sibling host input (Angular only infers
+      a structural directive's type parameter from an input on that same node), so
+      the Success value is unwrapped here instead of through `let-`. */
+  protected readonly profile = computed(() => {
+    const rd = this.store.profile();
+    return rd.tag === 'Success' ? rd.value : undefined;
+  });
+  protected readonly aantekeningen = computed(() => {
+    const rd = this.store.aantekeningen();
+    return rd.tag === 'Success' ? rd.value : undefined;
+  });
+
   /** Primary transactional actions, as an "aanvragen" list (see CIBG's
       componenten/aanvragen). The core portal sections live in the header nav now;
       the teaching pages (concepts/brief) are only reachable from here. */

src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts

@@ -169,7 +169,8 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
         }
         @case ('beroep') {
           <app-async [data]="lookupRd()">
-            <ng-template appAsyncLoaded let-data>
+            <ng-template appAsyncLoaded>
+              @if (duoData(); as data) {
                 <app-form-field
                   i18n-label="@@regWizard.diplomaLabel"
                   label="Kies het diploma waarmee u zich wilt registreren"
@@ -179,18 +180,18 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                 >
                   <app-radio-group
                     name="diploma"
-                  [options]="diplomaOptions($any(data))"
+                    [options]="diplomaOptions(data)"
                     [invalid]="!!err('diploma')"
                     [ngModel]="diplomaKeuze()"
-                  (ngModelChange)="onDiplomaKeuze($any(data), $event)"
+                    (ngModelChange)="onDiplomaKeuze(data, $event)"
                   />
                 </app-form-field>
 
                 @if (handmatigActief()) {
                   <app-alert type="warning" i18n="@@regWizard.handmatigWaarschuwing"
-                  >Een handmatig ingevoerd diploma kan niet automatisch worden geverifieerd. Kies uw
-                  beroep en beantwoord de aanvullende vragen; uw aanvraag wordt daarna handmatig
-                  beoordeeld.</app-alert
+                    >Een handmatig ingevoerd diploma kan niet automatisch worden geverifieerd. Kies
+                    uw beroep en beantwoord de aanvullende vragen; uw aanvraag wordt daarna
+                    handmatig beoordeeld.</app-alert
                   >
                   <app-form-field
                     i18n-label="@@regWizard.beroepLabel"
@@ -200,7 +201,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                   >
                     <app-radio-group
                       name="hm-beroep"
-                    [options]="beroepOptions($any(data))"
+                      [options]="beroepOptions(data)"
                       [invalid]="!!err('diploma')"
                       [ngModel]="draft().beroep ?? ''"
                       (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })"
@@ -217,7 +218,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                   </dl>
                 }
 
-              @for (q of actieveVragen($any(data)); track q.id) {
+                @for (q of actieveVragen(data); track q.id) {
                   <app-form-field
                     [label]="q.vraag"
                     [fieldId]="'vraag-' + q.id"
@@ -247,6 +248,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                     }
                   </app-form-field>
                 }
+              }
             </ng-template>
             <ng-template appAsyncLoading>
               <app-skeleton height="2.5rem" [count]="3" />
@@ -485,8 +487,11 @@ export class RegistratieWizardComponent {
   protected lookupRd: () => RemoteData<Error | undefined, DuoLookupDto> = this.lookup.duoLookup;
 
   /** Parsed lookup as a plain value (or null) — used outside the beroep step (the
-      controle summary) where the <app-async> template variable isn't in scope. */
-  private duoData = computed<DuoLookupDto | null>(() => {
+      controle summary) where the <app-async> template variable isn't in scope, and
+      inside it too: `<ng-template appAsyncLoaded>`'s own context can't inherit a
+      generic from the sibling [data] input (Angular only infers a structural
+      directive's type parameter from an input on that same node). */
+  protected duoData = computed<DuoLookupDto | null>(() => {
     const rd = this.lookupRd();
     return rd.tag === 'Success' ? rd.value : null;
   });

src/app/registratie/ui/registration-detail.page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
 import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
 import { ASYNC } from '@shared/ui/async/async.component';
@@ -22,8 +22,10 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
       backLink="/dashboard"
     >
       <app-async [data]="store.profile()">
-        <ng-template appAsyncLoaded let-p>
-          <app-registration-summary [reg]="$any(p).registration" />
+        <ng-template appAsyncLoaded>
+          @if (profile(); as p) {
+            <app-registration-summary [reg]="p.registration" />
+          }
         </ng-template>
         <ng-template appAsyncLoading>
           <app-skeleton height="2.5rem" [count]="6" />
@@ -38,4 +40,10 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
 })
 export class RegistrationDetailPage {
   protected store = inject(BigProfileStore);
+
+  /** See DashboardPage's `profile` for why this narrows via a computed instead of `let-`. */
+  protected readonly profile = computed(() => {
+    const rd = this.store.profile();
+    return rd.tag === 'Success' ? rd.value : undefined;
+  });
 }

src/app/registratie/ui/registration-summary/registration-summary.component.ts

@@ -30,14 +30,17 @@ import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
         key="Registratiedatum"
         [value]="reg().registratiedatum | date: 'longDate'"
       ></div>
-      <!-- Each status variant renders only the row its own data supports. -->
-      @switch (reg().status.tag) {
+      <!-- Each status variant renders only the row its own data supports. A single
+           @let binds status once so the @switch narrows its union by tag -- calling
+           reg().status again per case would give the checker a fresh, unnarrowed call. -->
+      @let status = reg().status;
+      @switch (status.tag) {
         @case ('Geregistreerd') {
           <div
             app-data-row
             i18n-key="@@summary.uiterste"
             key="Uiterste herregistratie"
-            [value]="$any(reg().status).herregistratieDatum | date: 'longDate'"
+            [value]="status.herregistratieDatum | date: 'longDate'"
           ></div>
         }
         @case ('Geschorst') {
@@ -45,28 +48,18 @@ import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
             app-data-row
             i18n-key="@@summary.geschorstTot"
             key="Geschorst tot"
-            [value]="$any(reg().status).geschorstTot | date: 'longDate'"
-          ></div>
-          <div
-            app-data-row
-            i18n-key="@@summary.reden"
-            key="Reden"
-            [value]="$any(reg().status).reden"
+            [value]="status.geschorstTot | date: 'longDate'"
           ></div>
+          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="status.reden"></div>
         }
         @case ('Doorgehaald') {
           <div
             app-data-row
             i18n-key="@@summary.doorgehaaldOp"
             key="Doorgehaald op"
-            [value]="$any(reg().status).doorgehaaldOp | date: 'longDate'"
-          ></div>
-          <div
-            app-data-row
-            i18n-key="@@summary.reden"
-            key="Reden"
-            [value]="$any(reg().status).reden"
+            [value]="status.doorgehaaldOp | date: 'longDate'"
           ></div>
+          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="status.reden"></div>
         }
       }
     </app-data-block>

src/app/shared/ui/async/async.component.ts

@@ -6,10 +6,20 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { RemoteData, fromResource, foldRemote } from '@shared/application/remote-data';
 
-/* Slot markers. Put on <ng-template> children of <app-async>. */
+/* Slot markers. Put on <ng-template> children of <app-async>. Generic so the
+   $implicit context is typed as the resource's T instead of unknown — see
+   AsyncComponent's contentChild<AsyncLoadedDirective<T>> below, which threads the
+   host's own T through the query result type. */
 @Directive({ selector: '[appAsyncLoaded]' })
-export class AsyncLoadedDirective {
-  constructor(public tpl: TemplateRef<{ $implicit: unknown }>) {}
+export class AsyncLoadedDirective<T = unknown> {
+  constructor(public tpl: TemplateRef<{ $implicit: T }>) {}
+
+  static ngTemplateContextGuard<T>(
+    _dir: AsyncLoadedDirective<T>,
+    _ctx: unknown,
+  ): _ctx is { $implicit: T } {
+    return true;
+  }
 }
 @Directive({ selector: '[appAsyncLoading]' })
 export class AsyncLoadingDirective {
@@ -88,7 +98,7 @@ export class AsyncComponent<T> {
   retryText = input($localize`:@@async.retry:Opnieuw proberen`);
   emptyText = input($localize`:@@async.empty:Geen gegevens gevonden.`);
 
-  loadedTpl = contentChild.required(AsyncLoadedDirective);
+  loadedTpl = contentChild.required<AsyncLoadedDirective<T>>(AsyncLoadedDirective);
   loadingTpl = contentChild(AsyncLoadingDirective);
   emptyTpl = contentChild(AsyncEmptyDirective);
   errorTpl = contentChild(AsyncErrorDirective);

src/app/showcase/concepts.page.ts

@@ -223,9 +223,9 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
             >
             <p class="tag plain">Success</p>
             <app-async [resource]="successRes" [isEmpty]="isEmpty"
-              ><ng-template appAsyncLoaded let-v
+              ><ng-template appAsyncLoaded
                 ><ul>
-                  @for (i of v; track i) {
+                  @for (i of successRes.value(); track i) {
                     <li>{{ i }}</li>
                   }
                 </ul></ng-template
@@ -258,16 +258,17 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
               placeholder="Typ een postcode, bijv. 1234 AB"
             />
           </div>
-          <div class="card" [class.card--good]="parsed().ok" [class.card--bad]="!parsed().ok">
-            @if (parsed().ok) {
+          @let r = parsed();
+          <div class="card" [class.card--good]="r.ok" [class.card--bad]="!r.ok">
+            @if (r.ok) {
               <p class="tag good">ok</p>
-              <pre>Postcode ="{{ $any(parsed()).value }}"</pre>
+              <pre>Postcode ="{{ r.value }}"</pre>
               <p class="note">
                 Een gevalideerde <code>Postcode</code> is een ander type dan een ruwe string.
               </p>
             } @else {
               <p class="tag bad">err</p>
-              <pre>{{ $any(parsed()).error }}</pre>
+              <pre>{{ r.error }}</pre>
             }
           </div>
         </div>