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.

Share:
12,209
rgk
Author by

rgk

Individual striving for perfection.

Updated on June 26, 2022

Comments

  • rgk
    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
    rgk over 7 years
    ha, its a typo, error is outside of data block. Im trying now.
  • rgk
    rgk over 6 years
    THanks a lot. Sorry for late reply.