Resource & rxResource

import { Component, resource, signal } from '@angular/core';

interface User { id: string; name: string; email: string; }

@Component({ selector: 'app-user-card', standalone: true, template: `
    <input [value]="userId()" (input)="userId.set($any($event.target).value)" />

    @if (userResource.isLoading()) { <p>Lade ...</p> }
    @else if (userResource.error()) { <p>Fehler beim Laden</p> }
    @else if (userResource.value(); as u) {
        <h2>{{ u.name }}</h2>
        <p>{{ u.email }}</p>
    }
` })
export class UserCardComponent {
    userId = signal('u-1');

    userResource = resource({
        params: () => this.userId(),
        loader: async ({ params, abortSignal }) => {
            const res = await fetch(`/api/users/${params}`, { signal: abortSignal });
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            return res.json() as Promise<User>;
        },
    });
}

@if (userResource.isLoading() && !userResource.hasValue()) {
    <p>Lade User ...</p>
} @else if (userResource.error(); as err) {
    <p class="error">{{ asError(err).message }}</p>
    <button (click)="userResource.reload()">Erneut versuchen</button>
} @else if (userResource.value(); as user) {
    <article [class.refreshing]="userResource.isLoading()">
        <h2>{{ user.name }}</h2>
        <p>{{ user.email }}</p>
        <button (click)="userResource.reload()">Aktualisieren</button>
    </article>
}

import { Component, inject, signal } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';

interface User { id: string; name: string; email: string; }

@Component({ selector: 'app-user-card', standalone: true, template: `
    @if (userResource.isLoading()) { <p>Lade ...</p> }
    @else if (userResource.value(); as u) {
        <h2>{{ u.name }}</h2>
        <p>{{ u.email }}</p>
    }
` })
export class UserCardComponent {
    private http = inject(HttpClient);
    userId = signal('u-1');

    userResource = rxResource({
        params: () => this.userId(),
        stream: ({ params }) =>
            this.http.get<User>(`/api/users/${params}`),
    });
}

import { resource, signal } from '@angular/core';

const userId = signal('u-1');

const r = resource({
    params: () => userId(),
    loader: async ({ params, abortSignal }) => {
        // abortSignal wird ausgeloest, sobald params() neu emittiert
        // oder die Komponente zerstoert wird
        const res = await fetch(`/api/users/${params}`, { signal: abortSignal });
        return res.json();
    },
});

userId.set('u-2'); // bricht den laufenden u-1-Request ab

async save(payload: Partial<User>) {
    await fetch(`/api/users/${this.userId()}`, {
        method: 'PATCH',
        body: JSON.stringify(payload),
        headers: { 'Content-Type': 'application/json' },
    });

    // Server-State frisch ziehen
    this.userResource.reload();
}

import { Component, inject, linkedSignal, signal } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';

interface User { id: string; name: string; email: string; }

@Component({ selector: 'app-profile-edit', standalone: true, template: `
    @if (profile.isLoading() && !profile.hasValue()) {
        <p>Lade ...</p>
    } @else if (profile.value(); as user) {
        <form (submit)="save($event)">
            <label>Name
                <input [value]="draftName()"
                    (input)="draftName.set($any($event.target).value)" />
            </label>
            <label>E-Mail
                <input [value]="draftEmail()"
                    (input)="draftEmail.set($any($event.target).value)" />
            </label>
            <button type="submit" [disabled]="saving()">
                {{ saving() ? 'Speichere ...' : 'Speichern' }}
            </button>
        </form>
    }
` })
export class ProfileEditComponent {
    private http = inject(HttpClient);
    userId = signal('u-1');
    saving = signal(false);

    profile = rxResource<User, string>({
        params: () => this.userId(),
        stream: ({ params }) =>
            this.http.get<User>(`/api/users/${params}`),
    });

    // linkedSignal als Edit-Bruecke: bei profile.reload() wird der Wert frisch geseeded
    draftName = linkedSignal(() => this.profile.value()?.name ?? '');
    draftEmail = linkedSignal(() => this.profile.value()?.email ?? '');

    async save(ev: Event) {
        ev.preventDefault();
        this.saving.set(true);
        try {
            await fetch(`/api/users/${this.userId()}`, {
                method: 'PATCH',
                body: JSON.stringify({
                    name: this.draftName(),
                    email: this.draftEmail(),
                }),
                headers: { 'Content-Type': 'application/json' },
            });
            this.profile.reload(); // -> draftName/draftEmail werden via linkedSignal neu seeded
        } finally {
            this.saving.set(false);
        }
    }
}

import { resource, signal } from '@angular/core';

const selectedId = signal<string | null>(null);

const r = resource({
    // Returnt undefined -> Resource bleibt im Status 'idle', kein Loader-Aufruf
    params: () => selectedId() ?? undefined,
    loader: async ({ params }) =>
        fetch(`/api/items/${params}`).then(res => res.json()),
});