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.
This commit is contained in:
eho
2026-07-03 21:27:01 +02:00
parent 34d34512b3
commit 199cbe1f8c
10 changed files with 514 additions and 328 deletions
+7 -6
View File
@@ -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>