Answer: 56

apps/angular/59-content-projection-defer/src/app/expandable-card.ts

@@ -1,11 +1,16 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  output,
+  signal,
+} from '@angular/core';
 
 @Component({
   selector: 'app-expandable-card',
   template: `
     <button
       class="text-fg-subtle hover:bg-button-secondary-bg-hover active:bg-button-secondary-bg-active focus:outline-button-border-highlight flex w-fit items-center gap-1 py-2 focus:outline focus:outline-2 focus:outline-offset-1"
-      (click)="isExpanded.set(!isExpanded())"
+      (click)="toggleExpansion()"
       data-cy="expandable-panel-toggle">
       @if (isExpanded()) {
         <svg
@@ -51,4 +56,11 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 })
 export class ExpandableCard {
   public isExpanded = signal(false);
+
+  expanded = output<boolean>();
+
+  toggleExpansion(): void {
+    this.isExpanded.update((isExpanded) => !isExpanded);
+    this.expanded.emit(this.isExpanded());
+  }
 }

apps/angular/59-content-projection-defer/src/app/page-2.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ResourceStatus,
+  signal,
 } from '@angular/core';
 import { ExpandableCard } from './expandable-card';
 
@@ -17,7 +18,7 @@ interface Post {
   selector: 'app-page-2',
   template: `
     page2
-    <app-expandable-card>
+    <app-expandable-card (expanded)="onExpansion($event)">
       <div title>Load Post</div>
       <div>
         @if (postRessource.isLoading()) {
@@ -36,8 +37,18 @@ interface Post {
   imports: [ExpandableCard],
 })
 export class Page2 {
-  public postRessource = httpResource<Post[]>(
-    'https://jsonplaceholder.typicode.com/posts',
+  // Set this signal to true to start fetching the posts
+  private readonly $loader = signal(false);
+
+  // Fetch posts from the API
+  public postRessource = httpResource<Post[]>(() =>
+    this.$loader() ? 'https://jsonplaceholder.typicode.com/posts' : undefined,
   );
   protected readonly ResourceStatus = ResourceStatus;
+
+  onExpansion(isExpanded: boolean) {
+    if (isExpanded && !this.postRessource.hasValue()) {
+      this.$loader.set(true);
+    }
+  }
 }

apps/signal/56-forms-and-signal/src/app/order.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   computed,
   input,
+  OnInit,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -44,7 +45,7 @@ import { products } from './products';
       </div>
       <button
         routerLink="/checkout"
-        [queryParams]="{ quantity: quantity() }"
+        [queryParams]="{ quantity: $quantity() }"
         queryParamsHandling="merge"
         class="w-full rounded-full border bg-blue-500 p-2 text-white">
         Checkout
@@ -53,19 +54,28 @@ import { products } from './products';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class OrderComponent {
+export default class OrderComponent implements OnInit {
   form = new FormGroup({
     quantity: new FormControl(1, { nonNullable: true }),
   });
 
+  // Query params
   productId = input('1');
+  quantity = input<string | undefined>();
+
   price = computed(
     () => products.find((p) => p.id === this.productId())?.price ?? 0,
   );
-  quantity = toSignal(this.form.controls.quantity.valueChanges, {
+  $quantity = toSignal(this.form.controls.quantity.valueChanges, {
     initialValue: this.form.getRawValue().quantity,
   });
-  totalWithoutVat = computed(() => Number(this.price()) * this.quantity());
+  totalWithoutVat = computed(() => Number(this.price()) * this.$quantity());
   vat = computed(() => this.totalWithoutVat() * 0.21);
   total = computed(() => this.totalWithoutVat() + this.vat());
+
+  ngOnInit(): void {
+    if (this.quantity()) {
+      this.form.controls.quantity.patchValue(Number(this.quantity()));
+    }
+  }
 }