redirect to a route after api call in angular2
12,209
Solution 1
import { Router } from '@angular/router';
export class HeroesComponent {
constructor(private router: Router) { }
onSubmit(modal): void {
if(model.valid === true) {
this.SharedService.postFormdata(model).subscribe(
(data) => {
// Page redirect when getting response
this.router.navigate(['/PublicPage']);
},
(error) => {
console.log("err", error);
});
}
}
}
For better understanding read this docs: Angular2 routing
Solution 2
First put your error
outside of data
block then If you want to redirect if it's success then add in
data => { this.router.navigate(['PublicPage']); }
Or if you want call anyhow, then use
() => {
this.router.navigate(['PublicPage']);
}
So try like that:
onSubmit(model) {
if (model.valid === true) {
this.SharedService.postFormdata(model).subscribe(
data => {
console.log(data);
this.router.navigate(['PublicPage']); // ON SUCCESS
},
error => Observable.throw(error),
() => {
this.router.navigate(['PublicPage']); //ANYHOW WILL CALL
}
);
}
}
Hope this will help.
Comments
-
rgk almost 2 years
I need to redirect the user to a different component after processing (via api) the data user submitted through form. Below is the code I tried.
In component
onSubmit(model){ if(model.valid === true) { this.SharedService.postFormdata(model).subscribe( data => { console.log(data)}, error => Observable.throw(error); ); this.router.navigate(['PublicPage']); } }
However, after call completed, its not redirecting to
PublicPage
component. Any help please. Thanks. -
rgk over 7 yearsha, its a typo, error is outside of data block. Im trying now.
-
rgk over 6 yearsTHanks a lot. Sorry for late reply.