feat(challenge 59): added lazy loading for posts

Author: kevinagus

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

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  output,
+  signal,
+} from '@angular/core';
 
 @Component({
   selector: 'app-expandable-card',
@@ -51,4 +57,10 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 })
 export class ExpandableCard {
   public isExpanded = signal(false);
+  expanded = output<boolean>();
+  constructor() {
+    effect(() => {
+      this.expanded.emit(this.isExpanded());
+    });
+  }
 }

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

@@ -1,9 +1,13 @@
-import { httpResource } from '@angular/common/http';
+import { httpResource, HttpResourceRef } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
   Component,
+  inject,
+  Injector,
   ResourceStatus,
+  signal,
 } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { ExpandableCard } from './expandable-card';
 
 interface Post {
@@ -17,16 +21,18 @@ interface Post {
   selector: 'app-page-2',
   template: `
     page2
-    <app-expandable-card>
+    <app-expandable-card (expanded)="triggerFetch.set($event)">
       <div title>Load Post</div>
       <div>
-        @if (postRessource.isLoading()) {
-          Loading...
-        } @else if (postRessource.status() === ResourceStatus.Error) {
-          Error...
-        } @else {
-          @for (post of postRessource.value(); track post.id) {
-            <div>{{ post.title }}</div>
+        @if (postRessource) {
+          @if (postRessource.isLoading()) {
+            Loading...
+          } @else if (postRessource.status() === ResourceStatus.Error) {
+            Error...
+          } @else {
+            @for (post of postRessource.value(); track post.id) {
+              <div>{{ post.title }}</div>
+            }
           }
         }
       </div>
@@ -36,8 +42,22 @@ interface Post {
   imports: [ExpandableCard],
 })
 export class Page2 {
-  public postRessource = httpResource<Post[]>(
-    'https://jsonplaceholder.typicode.com/posts',
-  );
+  public postRessource: HttpResourceRef<Post[] | undefined> | null = null;
+  protected triggerFetch = signal(false);
+  #injector = inject(Injector);
+  constructor() {
+    toObservable(this.triggerFetch)
+      .pipe(takeUntilDestroyed())
+      .subscribe((trigger) => {
+        if (trigger) {
+          this.postRessource = httpResource<Post[]>(
+            'https://jsonplaceholder.typicode.com/posts',
+            {
+              injector: this.#injector,
+            },
+          );
+        }
+      });
+  }
   protected readonly ResourceStatus = ResourceStatus;
 }