Challenge 59

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)="toggleExpanded()"
       data-cy="expandable-panel-toggle">
       @if (isExpanded()) {
         <svg
@@ -51,4 +56,13 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 })
 export class ExpandableCard {
   public isExpanded = signal(false);
+  expanded = output<void>();
+
+  toggleExpanded() {
+    const newState = !this.isExpanded();
+    this.isExpanded.set(newState);
+    if (newState) {
+      this.expanded.emit();
+    }
+  }
 }

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

@@ -2,7 +2,10 @@ import { httpResource } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
   Component,
+  inject,
+  Injector,
   ResourceStatus,
+  runInInjectionContext,
 } from '@angular/core';
 import { ExpandableCard } from './expandable-card';
 
@@ -17,15 +20,15 @@ interface Post {
   selector: 'app-page-2',
   template: `
     page2
-    <app-expandable-card>
+    <app-expandable-card (expanded)="loadPosts()">
       <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>
           }
         }
@@ -34,10 +37,20 @@ interface Post {
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ExpandableCard],
+  standalone: true,
 })
 export class Page2 {
-  public postRessource = httpResource<Post[]>(
-    'https://jsonplaceholder.typicode.com/posts',
-  );
+  private readonly injector = inject(Injector);
+  public postResource: ReturnType<typeof httpResource<Post[]>> | null = null;
   protected readonly ResourceStatus = ResourceStatus;
+
+  loadPosts() {
+    if (!this.postResource) {
+      runInInjectionContext(this.injector, () => {
+        this.postResource = httpResource<Post[]>(
+          'https://jsonplaceholder.typicode.com/posts',
+        );
+      });
+    }
+  }
 }