// 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)
);
Preview:
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