From e07401993be6de57a90d7e18bfd9d609abafc3ba Mon Sep 17 00:00:00 2001
From: Michal Grzegorczyk <michalgrzegorczyk.dev@gmail.com>
Date: Fri, 4 Apr 2025 01:19:19 +0200
Subject: [PATCH] feat(59): finished

---
 .../src/app/page-2.ts                         | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/angular/59-content-projection-defer/src/app/page-2.ts b/apps/angular/59-content-projection-defer/src/app/page-2.ts
index 3f2886d4e..582b70da5 100644
--- a/apps/angular/59-content-projection-defer/src/app/page-2.ts
+++ b/apps/angular/59-content-projection-defer/src/app/page-2.ts
@@ -1,8 +1,10 @@
-import { httpResource } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
+  resource,
   ResourceStatus,
+  viewChild,
 } from '@angular/core';
 import { ExpandableCard } from './expandable-card';
 
@@ -20,12 +22,12 @@ interface Post {
     <app-expandable-card>
       <div title>Load Post</div>
       <div>
-        @if (postRessource.isLoading()) {
+        @if (postResource.isLoading()) {
           Loading...
-        } @else if (postRessource.status() === ResourceStatus.Error) {
+        } @else if (postResource.status() === ResourceStatus.Error) {
           Error...
         } @else {
-          @for (post of postRessource.value(); track post.id) {
+          @for (post of postResource.value(); track post.id) {
             <div>{{ post.title }}</div>
           }
         }
@@ -36,8 +38,19 @@ interface Post {
   imports: [ExpandableCard],
 })
 export class Page2 {
-  public postRessource = httpResource<Post[]>(
-    'https://jsonplaceholder.typicode.com/posts',
-  );
   protected readonly ResourceStatus = ResourceStatus;
+  private readonly URL = 'https://jsonplaceholder.typicode.com/posts';
+
+  private readonly card = viewChild.required(ExpandableCard);
+  private readonly isCardOpened = computed(() => this.card().isExpanded());
+
+  protected readonly postResource = resource<Post[], { isCardOpened: boolean }>(
+    {
+      loader: async ({ request }) =>
+        request.isCardOpened
+          ? await fetch(this.URL).then((res) => res.json())
+          : [],
+      request: () => ({ isCardOpened: this.isCardOpened() }),
+    },
+  );
 }