Displaying a detailed post from ngFor - node.js

Question

I'm creating a Blog using Angular 7, MongoDB and NodeJS. So far I have created a component that loops through all the posts from the database and displays them on a single page.
<div class="container-fluid">
<div class="row" *ngIf="posts.length > 0" >
<div class="col-lg-12 col-md-12 col-xl-12 text-center" *ngFor="let post of posts ">
<div class="post-preview" >
<h2 class="post-title text-center">
{{ post.title }}
</h2>
<h3 class="post-subtitle text-center">
{{ post.subtitle }}
</h3>
<br>
<div class="post-image">
<img [src]="post.imagePath" [alt]="post.title">
</div>
<br>
<p class="post-meta text-center">{{post.date}}</p>
</div>
</div>
</div>
</div>
This is for displaying all the blog posts on a single page. When a user clicks on a single post he should be directed to a page that shows detailed information for that post only (like the blog content). How do I implement that?
In the posts.service I have the following function for getting a single post.
getPost(id: string) {
return this.http.get<{_id: string, title: string, subtitle: string, content: string, date: Date, imagePath: string}>(
'http://localhost:3000/api/posts/' + id);
}
And on the backend I have the following route:
router.get("/:id", (req, res, next) => {
Post.findById(req.params.id).then(post => {
if (post) {
res.status(200).json(post);
} else {
res.status(404).json({
message: 'Post not found!'
});
}
});
});

Answer 1

I found the answer here: https://codecraft.tv/courses/angular/routing/parameterised-routes/
The soloution:
[1]
Spefify the parameterised route in router as:
{ path: 'blog/:postId', component: SinglePostComponent }
[2]
Create a link to direct the user to the the specified blog post
<a [routerLink]="['/blog', post.id]" > </a>
[3]
In the SinglePostComponent.ts put the following code:
export class SinglePostComponent implements OnInit {
post: Post;
private postId: string;
constructor(
private route: ActivatedRoute,
private postsService: PostsService
) {}
ngOnInit() {
this.route.paramMap.subscribe((paramMap: ParamMap) => {
this.postId = paramMap.get('postId');
this.postsService.getPost(this.postId).subscribe(postData => {
this.post = {id: postData._id, title: postData.title, subtitle: postData.subtitle,
content: postData.content, date: postData.date, imagePath: postData.imagePath};
});
}
);
}
}