Update a different component (nested on same level) after http call to Firebase has successfully posted data

Question

I am trying to post some data to the firebase DB and prompt a success message which redirects the user to the same page, resetting the form in case the post request has been successful.

The component involved are add-review.component.ts and addReview.service.ts.

add-review.component.ts is in the add-review folder and addReview.service.ts in the service folder, these two folders are on the same level, nested under app.

After the service has successfully posted the data, I have been trying to let the other component know, so that the form could be reset() and re-initiated, without luck.

I can't do an eventEmitter and an @Output() because the add-review.component.ts is served through a <router-outlet>, so there's no direct parent-child link.

Some code now:

add-review.component.ts:

onSubmitReview() {
    const newReview = this.addReviewForm.value;
    this.addReviewService.addNewReview(newReview);
  }

add-review.service.ts:

addNewReview(newReview: Review) { 
    this.http.post('https://myApp-6c621.firebaseio.com/reviews.json', newReview).subscribe(reportData => {
      console.log(reportData);
}

I would like to:

1) if the data has been successfully posted, return to the page and reset the form (in the service file I am already redirecting using this.router.navigate(['/add-review']);) and it works fine.

2) else, return to the same page and the data is still in the form inputs.

How can I update the add-review.component.ts from the add-review.service.ts upon successful post request?

I know there might be an easier way, i.e. perform the post request right on the component, but I am interested in how to communicate this sort of things between same-level router-outlet-nested components.

Thanks for your help!

Why subscribe inside the service? Normally your component would do the subscribe. Once you do that you can do whatever you need within the subscribe callback. — penleychan, Oct 03 '19 at 16:10
I was subscribing just to log the reportData call in the console, thanks for pointing it out. Also, I wanted to fire an alert with a different message in case of successful or unsuccessful outcome of the post (so if reportData is true). — mike87, Oct 03 '19 at 16:17

score 1 · Accepted Answer · edited Oct 03 '19 at 16:37

1

You need to subscribe to the Observable in the component add-review.component.ts:

onSubmitReview() {
    const newReview = this.addReviewForm.value;
    this.addReviewService.addNewReview(newReview).subscribe(
        response => {
            //reset here using reset() method of forms
        }, error => {
            console.log(error) //catch error
        });
}

In your service:

addNewReview(newReview: Review) { 
    return this.http.post('https://myApp-6c621.firebaseio.com/reviews.json', newReview);
}

Note: Use the reset() method. Refer this doc: https://angular.io/api/forms/FormControl

edited Oct 03 '19 at 16:37

Mises

4,251
2
19
32

answered Oct 03 '19 at 16:22

amshu

131
1
8

thanks for your reply. I've used your code as it is, and when subscribing to `this.addReviewService.addNewReview` I receive the error message *Property 'subscribe' does not exist on type 'void'.*" in the code, and "*Cannot read property 'subscribe' of undefined*" in the console. I've tried creating an Observable then, like this ` response$: Observable;` and subscribing to it. The code error disappeared but I still get the "*Cannot read property 'subscribe' of undefined*" in the console. Thanks. – mike87 Oct 03 '19 at 18:02
My bad. I was forgetting the `return` before the http call. It works perfectly, thank you very much!! :D – mike87 Oct 03 '19 at 18:20

Update a different component (nested on same level) after http call to Firebase has successfully posted data

1 Answers1