redirect to a route after api call in angular2

angular router subscribe
rgk picture rgk · Dec 17, 2016 · Viewed 11.2k times · Source

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

tushar balar picture tushar balar · Dec 17, 2016 
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

Related questions

RouterModule.forRoot(ROUTES) vs RouterModule.forChild(ROUTES)

What is the differences between these two and what are the use cases for each? The docs aren't exactly helpful: forRoot creates a module that contains all the directives, the given routes, and the router service itself. forChild creates a …

Read More
Angular2 Router error: cannot find primary outlet to load 'HomePage'

I just started using the new routing library (@angular/router v3.0.0-alpha.7) but following the official docs leads to error below: browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage' Question is - …

Read More
Redirect user with router depending on logged in status

I would like to automatically route to a login page if the user is not logged in. app.module.ts import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; …

Read More