diff --git a/apps/angular/59-content-projection-defer/src/app/expandable-card.ts b/apps/angular/59-content-projection-defer/src/app/expandable-card.ts index 8f446ed80..4e10900b3 100644 --- a/apps/angular/59-content-projection-defer/src/app/expandable-card.ts +++ b/apps/angular/59-content-projection-defer/src/app/expandable-card.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, model } from '@angular/core'; @Component({ selector: 'app-expandable-card', @@ -50,5 +50,5 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; }, }) export class ExpandableCard { - public isExpanded = signal(false); + public isExpanded = model(false); } 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 5665466d8..359ca102c 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,9 @@ -import { httpResource } from '@angular/common/http'; import { ChangeDetectionStrategy, Component, + resource, ResourceStatus, + signal, } from '@angular/core'; import { ExpandableCard } from './expandable-card'; @@ -17,7 +18,7 @@ interface Post { selector: 'app-page-2', template: ` page2 - +
Load Post
@if (postResource.isLoading()) { @@ -36,8 +37,15 @@ interface Post { imports: [ExpandableCard], }) export class Page2 { - public postResource = httpResource( - 'https://jsonplaceholder.typicode.com/posts', - ); + toLoad = signal(false); + postResource = resource({ + request: () => ({ loading: this.toLoad() }), + loader: async ({ request }) => { + if (!request.loading) return; + const res = await fetch('https://jsonplaceholder.typicode.com/posts'); + if (!res.ok) throw new Error('Failed to load posts'); + return await res.json(); + }, + }); protected readonly ResourceStatus = ResourceStatus; }