Having trouble updating a child component in Angular 5, despite efforts.
The home component receives data through a service.
There is a function named getTopicToFilter which gets updated by another component successfully, providing the TopicId via an @Output EventEmitter.
The issue lies in articles not being updated in the child component.
export class HomeComponent implements OnInit {
loading = true;
topics: Observable<Topic[]>;
posts: Observable<Post[]>;
public constructor(
private blogService: BlogService
) { }
ngOnInit() {
this.posts = this.blogService.getPostsByTopic().share()
Observable.forkJoin([
this.posts
]).subscribe(
response => { },
error => {
console.log('An error occurred:', error);
},
() => {
this.loading = false;
});
}
getTopicToFilter(topicId) {
this.posts = this.blogService.getPostsByTopic(topicId)
}
}
Html for HomeComponent:
<app-posts [posts]="posts | async"></app-posts>
Lastly, the child PostsComponent;
export class PostsComponent{
@Input() posts: Post[];
ngOnChanges(changes: SimpleChanges) {
if (changes['posts']) {
// Need help as this always displays the original insights and not the filtered list
console.log(this.posts)
}
}
}
Update - this is my BlogService
public getPostsByTopic(topicId = ""): Observable<Post[]> {
return this.http.get<Post[]>(this.baseUrl + '/getPostsByTopic?TopicId=${topicId}', { headers });
}