I encountered a challenge in my latest project. I implemented Nested Children Routing to display data, and I want the specific item's data to be visible when clicking on the button. The routing is set up correctly, but I'm struggling to find the right function for the items.
Here is the service code:
PostsService.service.ts
getPostById(id: string){
let docId = this.afs.collection('posts').doc(id).get()
.subscribe( doc => {
if(doc.exists){
console.log('Document Id => ', doc.id)
console.log('Document data => ', doc.data())
}else {
console.log('Document not found')
}
});
return docId;
}
And here is the TypeScript function for handling a single item:
.component.ts
posts: Posts[] = [];
post!:any;
constructor(
private PostsService: PostsService,
private route: ActivatedRoute
) {}
ngOnInit(): void {
let id = this.route.snapshot.params['id']
this.PostsService.getPostById(id);
}