http-resource.component.ts

@Component({
    template: `
        @if (todos.hasValue()) {
            <select [(ngModel)]="todoId">
                @for (todo of todos.value(); track todo.id) {
                    <option [value]="todo.id">{{ todo.title }}</option>
                }
            </select>
        }
        @if (todo.hasValue()) {
            <div>
                <h1>{{ todo.value().title }}</h1>
                <p>{{ todo.value().completed }}</p>
            </div>
        }
        @if (todos.isLoading() || todo.isLoading()) {
            <div>Loading...</div>
        }
    `,
})
export class HttpResourceComponent {
    todoId = signal<number | null>(1);
    todos = httpResource<Todo[]>(
        () => `https://jsonplaceholder.typicode.com/todos`,
    );
    todo = httpResource<Todo>(
        // as soon as the user selects a new todo
        // the `todoId` signal will change its value
        // and the `todo` resource will be reloaded
        () => `https://jsonplaceholder.typicode.com/todos/${this.todoId()}`,
    );
}