post.component.ts

@Component({
  template: ``
    @if (post.isLoading()) {
        <span>Loading...</span>
    } @else if (post.hasValue()) {
        <h1>{{ post.value()!.title }}</h1>
        <p>{{ post.value()!.body }}</p>
        @if (author.hasValue()) {
            <div>
            <span>Author: </span>
            <span>{{ author.value()!.name }}</span>
            </div>
        } 
    } @else if (post.error()) {
        <span>Error loading post: {{ post.error() }}</span>
        <button (click)="post.reload()">Retry</button>
    }
  ``,
})
export class PostComponent {
  readonly #http = inject(HttpClient);
  postId = input.required<number>();
  post = rxResource({
    request: () => ({ id: this.postId() }),
    loader: () =>
      this.#http.get<Post>(
        `https://jsonplaceholder.typicode.com/posts/${this.postId()}`
      ),
  });
  author = rxResource({
    request: () => ({ id: this.post.value()?.userId }),
    loader: (id) => {
      if (id) {
        return this.#http.get<User>(
          `https://jsonplaceholder.typicode.com/users/${id}`
        );
      }
      return of(null);
    },
  });
}