resource-now.component.ts

@Component({
    template: `
        @if (todo.hasValue()) {
            <form (ngSubmit)="save()">
                <input [(ngModel)]="todo.value().title" />
                <button type="submit">Save</button>
            </form>
        }
    `,
    imports: [FormsModule],
})
export class HttpResourceComponent {
    readonly #http = inject(HttpClient);
    todoId = signal<number | null>(1);
    todo = httpResource<Todo>(
        () => `https://jsonplaceholder.typicode.com/todos/${this.todoId()}`,
    );

    save() {
        if (this.todo.hasValue()) {
            this.#http
              .put(
                `https://jsonplaceholder.typicode.com/todos/${this.todoId()}`,
                this.todo.value(),
              )
              .subscribe(
                // handle success
              );
        }
    }

    delete() {
        if (this.todo.hasValue()) {
            this.#http
              .delete(
                `https://jsonplaceholder.typicode.com/todos/${this.todoId()}`,
              )
              .subscribe(
                // handle success
              );
        }
    }
}