Answer:59

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

@@ -1,11 +1,36 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  contentChild,
+  Directive,
+  signal,
+  TemplateRef,
+} from '@angular/core';
+
+@Directive({
+  selector: '[cardContentTemplate]',
+})
+export class CardContentTemplateDirective {
+  static ngTemplateContextGuard(
+    dir: CardContentTemplateDirective,
+    ctx: any,
+  ): ctx is CardContentTemplateContext {
+    return true;
+  }
+}
+
+type CardContentTemplateContext = {
+  $implicit: { expanded: boolean };
+};
 
 @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())"
+      #expandContentButton
       data-cy="expandable-panel-toggle">
       @if (isExpanded()) {
         <svg
@@ -41,14 +66,29 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
       class="overflow-hidden transition-[max-height] duration-500"
       [class.max-h-0]="!isExpanded()"
       [class.max-h-[1000px]]="isExpanded()">
-      <ng-content />
+      @defer (on interaction(expandContentButton)) {
+        <ng-container
+          [ngTemplateOutlet]="cardContentTemplate()"
+          [ngTemplateOutletContext]="{
+            $implicit: { expanded: isExpanded() }
+          }"></ng-container>
+      } @placeholder {
+        <div>This is the card content placeholder</div>
+      }
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgTemplateOutlet],
   host: {
     class: 'flex flex-col gap-2 ',
   },
 })
 export class ExpandableCard {
   public isExpanded = signal(false);
+  public cardContentTemplate = contentChild.required<
+    CardContentTemplateDirective,
+    TemplateRef<CardContentTemplateContext>
+  >(CardContentTemplateDirective, {
+    read: TemplateRef,
+  });
 }

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

@@ -2,9 +2,15 @@ import { httpResource } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
+  Directive,
   ResourceStatus,
+  viewChild,
 } from '@angular/core';
-import { ExpandableCard } from './expandable-card';
+import {
+  CardContentTemplateDirective,
+  ExpandableCard,
+} from './expandable-card';
 
 interface Post {
   id: number;
@@ -13,31 +19,55 @@ interface Post {
   userId: number;
 }
 
+@Directive({
+  selector: '[postResource]',
+})
+export class PostResourceDirective {
+  readonly isLoading = computed(() => this.#postHttpResource.isLoading());
+  readonly status = computed(() => this.#postHttpResource.status());
+  readonly value = computed(() => this.#postHttpResource.value());
+
+  readonly #postHttpResource = httpResource<Post[]>(
+    () => 'https://jsonplaceholder.typicode.com/posts',
+  );
+}
+
 @Component({
   selector: 'app-page-2',
   template: `
     page2
     <app-expandable-card>
       <div title>Load Post</div>
       <div>
-        @if (postResource.isLoading()) {
-          Loading...
-        } @else if (postResource.status() === ResourceStatus.Error) {
-          Error...
-        } @else {
-          @for (post of postResource.value(); track post.id) {
-            <div>{{ post.title }}</div>
-          }
-        }
+        <ng-template [cardContentTemplate] let-state>
+          <div postResource>
+            @if (state.expanded) {
+              @if (postResourceDir().isLoading()) {
+                <div>Loading...</div>
+              } @else if (postResourceDir().status() === ResourceStatus.Error) {
+                <div>Error...</div>
+              } @else {
+                @for (post of postResourceDir().value(); track post.id) {
+                  <div>{{ post.title }}</div>
+                }
+              }
+            }
+          </div>
+        </ng-template>
       </div>
     </app-expandable-card>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ExpandableCard],
+  imports: [
+    ExpandableCard,
+    PostResourceDirective,
+    CardContentTemplateDirective,
+  ],
 })
 export class Page2 {
-  public postResource = httpResource<Post[]>(
-    'https://jsonplaceholder.typicode.com/posts',
-  );
   protected readonly ResourceStatus = ResourceStatus;
+
+  protected readonly postResourceDir = viewChild.required(
+    PostResourceDirective,
+  );
 }