redirect to a route after api call in angular2

Question

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.

Answer 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

Answer 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.