After Submit form navigate to different component and show success message in Angular

Question

I have a component that send data to a service to save data in DB. After that i want to redirect or navigate to a different component and show success message there. I have implement it but i always get the wrong value. I am also not sure if i have implement it correct.Any help is welcome. Here is my code.

  Component class on submit etc {
    .....
   this.Service.updatePassword(this.neuesPassword);  //this will call the updatepassword  on service
   //after it will navigate to and pass queryParams
   this.router.navigateByUrl('/url',{ queryParams: { response: this.response } });
   }
    //this is the service method that is called 
   public updatePassword(newPass: string) {
    let payload = new HttpParams();
    payload = payload.set('Pass', newPass);
    this.httpClient.post(this.URL_UPDATE_PASSWORD, { newPassword }).subscribe((response: boolean) => {
        this.isSaved = response;           
    });

at the component i want to show the message i have on ngOnInit() { } method this

this.route.queryParams.subscribe(params => {
  this._isChanged = params['response'];

});

and i want the _isChanged variable to get the value of the response. Something i am doing wrong . I have also look here send-data-through-routing-paths-in-angular

but i am doing something wrong. Any help wth that . thanks

in the service method. your argument is newPass but the .post is using newPassword. shouldn't it be the payload ? navigation has to happen inside the observer's success function. pls post more complete code — ihor.eth, May 04 '20 at 16:47

Lukas · Accepted Answer · 2020-05-04T10:25:26.907

The Problem ist, that posting the content to an DB is an Async task. At the point where you are navigating to another path the callback function for the http post subscription has not been called yet. So at the point you navigate this.isSaved is undefined.

Try waiting until the callback function is executed. For example navigate in the callback function itself.

In my opinion there are to possible ways: .post returns an observable so you can return this observable in updatePassword and subscribe in the component.

Service:

public updatePassword(newPass: string) {
  // [...]
   return this.httpClient.post(this.URL_UPDATE_PASSWORD, { newPassword });
}

Component:

// [...]
this.Service.updatePassword(this.neuesPassword).subscribe((response) => {
    this.router.navigateByUrl('/url',{ queryParams: { response: response } });
});

The better way in my opinion is converting the observable to an promise with toPromise then you can return this promise and resolve it in the component.

Service:

public updatePassword(newPass: string) {
    // [...]
    return this.httpClient.post(this.URL_UPDATE_PASSWORD, { newPassword }).toPromise();
}

Component:

// [...]
this.Service.updatePassword(this.neuesPassword).then((response) => {
    this.router.navigateByUrl('/url',{ queryParams: { response: response } });
});

In both cases I would recommend reading about async await, promises and observables.

I think something like you say happens . But i dont understand how to solve it . can you give me some infos ? Thanks — JohnF Conor, May 04 '20 at 10:10
I updated my solutions and tips where to search. Promises and Observables are a really important part of Angular especially when working with databases or other asynchronous tasks so I think it would help a lot getting into it. — Lukas, May 04 '20 at 10:27

After Submit form navigate to different component and show success message in Angular

1 Answers1