subscribing a http get call - why do I need to refresh my frontend page to get the data after it got altered? - node.js

Question

So I have a web application built with angular on the frontend and node js on the backend. Im building an FAQ app where a user can add categories. See the photo below:
Those categories are stored in a pg database. When navigating to the page "Categories", I make a http call to my node js backend to get all categories from the database. My api looks like this:
app.get('/all-categories', async (req, res) => {
const result = await pool.query('select * from "Category"');
res.json(result.rows);
});
And following is my frontend, the categories.ts:
export class CategoriesComponent implements OnInit, OnDestroy {
categories: Category[] = [];
subscriptions = new Subscription();
constructor(private httpService: HttpService) { }
ngOnInit(): void {
const subscription = this.httpService.getAllCategories().subscribe(allCategories => {
this.categories = allCategories;
});
this.subscriptions.add(subscription);
}
ngOnDestroy(): void {
this.subscriptions.unsubscribe();
}
onDeleteButtonClick(categoryUUID: string) {
this.httpService.deleteCategoryByUUID(categoryUUID).pipe(
take(1)
).subscribe();
}
}
Now, whats the problem?
The problem is, when I navigate to the Categories page, all the categories are shown. But when I delete a category using the red delete button, I need to refresh the page in order to see the updated number of categories.
Why is this so? And what do I need to do to make it work?

Answer 1

I reckon to change the way of how you obtain the data from your service, you could subscribe to the observable in an asynchronous way with async pipe from the template, and when one category will be eliminated, you can update your observable.
on this way your .ts should be in this way:
export class CategoriesComponent implements OnInit {
categories$: Observable<Category[]> = [];
constructor(private httpService: HttpService) { }
ngOnInit(): void {
this.categories$ = this.httpService.getAllCategories();
}
async onDeleteButtonClick(categoryUUID: string) {
const deleteCategory = await this.httpService.deleteCategoryByUUID(categoryUUID).pipe(take(1))
.toPromise();
if(deleteCategory) {
this.categories$ = this.httpService.getAllCategories();
}
}
}
and your template something like this:
<div *ngIf="categories$ | async as categories">
<div *ngFor="let cat of categories">cat</div>
</div>

Answer 2

You can add tap operator in deleteCategoryByUUID, and filter categories:
this.categories = this.categories.filter(c => c !== c.uid);