How do I update component in Angular instantly after the HttpRequest is made?

Question

I have a service that gets "posts" from a server that is then displayed on the "home" component on my app. I Also have a form on the home component and the posts can be deleted. I want to update the component immedietly after a new post is made (with the form) or when a post is deleted. Currently the Post/Delete does work, but i have to refresh the page for the changes to show.

I have tried "GET" after post/delete but it still does not work. I assume that the data does not have time to be deleted/posted before the GET line of code is excuted. I Also tried created an interceptor and intercept every HTTP request but that does not seem to work either. Any suggestions on what i should look into. I'm fairly new to Angular (and web-development in general).

[api.service.ts]

        @Injectable({
        providedIn: "root"
        })

        getHomeNotifications(): Observable<HomeComponent[]> {
        return this.http.get<HomeComponent[]>(
        this.api + "/notification/list/active"
        );
        }

        removeNotification(Notifications): Observable<HomeComponent> {
        return this.http.post<HomeComponent>(
        this.api + "/notification/expire",
        Notifications
        );
        }

        postNotifications(form: HomeComponent): Observable<HomeComponent> {
        return this.http.post<HomeComponent>(
        this.api + "/notification/create",
        form
        );
        }

[interceptor]

        intercept(req: HttpRequest<any>, next: HttpHandler): 
        Observable<HttpEvent<any>> {
        return next.handle(req).pipe(finalize(()=>
        this.apiService.getCurrentNotifications()
        }

[home.component.ts]

        getCurrentNotifications(): void {
        this.apiService.getHomeNotifications().subscribe(data => {
        this.notifications = data;
        });
        }

        onRemove(id) {
          this.noti = new Notifications();
          this.noti.notificationId = id;
          this.apiService.removeNotification(this.noti).subscribe();
        });


        onPost(): void {
          this.apiService.postNotifications(this.pushForm.value).subscribe();
        }

My first attempt was just trying to run the getCurrentNotifications() after this.apiService.removeNotification(this.noti).subscribe(); etc but that did not work. My second attemp was running the interceptor but no luck there either.

Answer 1

So this took me a whole day but i finally fixed it. writing () => function in subscribe will fire the function after subscribing is finished. So in my onRemove and onPost:

 onPost(): void {
          this.apiService.postNotifications(this.pushForm.value).subscribe(() => this.getCurrentNotification());
        }

I'm calling the update function to load my getCurrentNotification to reload the component and get the latest data. This worked fine for post, but i didn't for remove. I thought that was a problem with the subscribe function. What took me hours to relise is that it was a back-end problem. What was going on in the back end is, for a notification is going through the expire req, the "Valid to" date is changed immedietley to todays date-hour-second-ms. So sometimes, this was happening too quickly that the request is finished before the time is changed- and that would cause the notification to not expire (until i reloaded the page of course). So changing the back-end so that the expired notification valid time is changed to current time - 1 minute fixed the issue. Hope this helps people stuck on the same problem :)