Preview:
// html
postWithCategory$ | async

// component
postWithCategory$ = this.postService.postWithCategory$

// post.service.ts
postWithCategory$ = combineLatest([
  this.allPosts$,
  this.categoryService.allCategories$
]).pipe(
  map( ([posts, cat]) => this.mapCategories(posts, cat) )
)

allPosts$ = this.http.get<Post[]>(this.postsUrl).pipe(
  catchError(this.handleError)
);

mapCategories(posts: Post[], cat: PostCatergory[]): Post[]{
  return posts.map( post => ({
    ...post,
    category: cat.find( c => post.categoryId === c.id)?.name
  }) as Post )
}

// category.service
allCategories$ = this.http.get<PostCategory[]>(this.catUrl).pipe(
  catchError(this.handleError),
  shareReplay(1)
);
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter