How to determine previous page URL in Angular

Question

Suppose I am currently on the page which has the URL  user  id   Now from this page I navigate to next page  id posts   Now Is there a way  so that i can check what is the previous URL  i e   user  id   Below are my routes  export const routes  Routes              path   user  id   component  UserProfileComponent                path    id posts   component  UserPostsComponet

User · Answer

Using pairwise from rxjx you can achieve this easier. import { filter,pairwise } from 'rxjs/operators';

previousUrl: string;
constructor(router: Router) {
router.events
  .pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
  .subscribe((events: RoutesRecognized[]) => {
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
  this.previousUrl = events[0].urlAfterRedirects;
});

}

User · Answer

This worked for me in angular    6 x versions    this router events              subscribe  event    gt                  if  event instanceof NavigationStart                    window localStorage setItem  previousUrl   this router url

User · Answer

Create a injectable service   import   Injectable   from   angular core   import   Router  RouterEvent  NavigationEnd   from   angular router         A router wrapper  adding extra functions      Injectable   export class RouterExtService      private previousUrl  string   undefined    private currentUrl  string   undefined     constructor private router   Router        this currentUrl   this router url      router events subscribe event   gt          if  event instanceof NavigationEnd                    this previousUrl   this currentUrl          this currentUrl   event url                          public getPreviousUrl        return this previousUrl              Then use it everywhere you need  To store the current variable as soon as possible  it s necessary to use the service in the AppModule      AppModule export class AppModule     constructor private routerExtService  RouterExtService                    Using in SomeComponent export class SomeComponent implements OnInit      constructor private routerExtService  RouterExtService  private location  Location          public back    void       this location back             Strange name  but it makes sense  Behind the scenes  we are pushing to history the previous url   public goToPrevious    void       let previous   this routerExtService getPreviousUrl         if previous        this routerExtService router navigateByUrl previous

User · Answer

I had similar problem when I had wanted to back to previous page  Solution was easier than I could imagine    lt button  routerLink            gt     Back  lt  button gt    And it returns to parent url  I hope it will help someone

User · Answer

Angular 8  amp  rxjs 6 in 2019 version  I would like to share the solution based on others great solutions   First make a service to listen for routes changes and save the last previous route in a Behavior Subject  then provide this service in the main app component in constructor then use this service to get the previous route you want when ever you want   use case  you want to redirect the user to an advertise page then auto redirect him her to where he did came from so you need the last previous route to do so      service   route-events service ts  import   Injectable   from   angular core   import   Router  RoutesRecognized   from   angular router   import   BehaviorSubject   from  rxjs   import   filter  pairwise   from  rxjs operators   import   Location   from   angular common     Injectable   export class RouteEventsService           save the previous route   public previousRoutePath   new BehaviorSubject lt string gt          constructor      private router  Router      private location  Location                 initial prvious route will be the current path for now     this previousRoutePath next this location path              on every route change take the two events of two routes changed using pairwise         and save the old one in a behavious subject to access it in another component        we can use if another component like intro-advertise need the previous route        because he need to redirect the user to where he did came from      this router events pipe        filter e   gt  e instanceof RoutesRecognized         pairwise                   subscribe  event  any      gt            this previousRoutePath next event 0  urlAfterRedirects                    provide the service in app module    providers                 RouteEventsService                 Inject it in app component     constructor      private routeEventsService  RouteEventsService       finally use the saved previous route in the component you want    onSkipHandler           navigate the user to where he did came from     this router navigate  this routeEventsService previousRoutePath value

User · Answer

All the Above ANSWER will be loads URL multiple times  If user visited any other component also  these code will loads   So better to use  Service creating concept  https   community wia io d 22-access-the-previous-route-in-your-angular-5-app  This will works well in all versions of Angular   please Make sure to add it to the providers array in your app module file

User · Answer

I m using Angular 8 and the answer of  franklin-pious solves the problem  In my case  get the previous url inside a subscribe cause some side effects if it s attached with some data in the view   The workaround I used was to send the previous url as an optional parameter in the route navigation   this router navigate    my-previous-route    previousUrl   my-current-route       And to get this value in the component   this route snapshot paramMap get  previousUrl     this router and this route are injected inside the constructor of each component and are imported as  angular router members   import   Router  ActivatedRoute     from   angular router

User · Answer

I had some struggle to access the previous url inside a guard  Without implementing a custom solution  this one is working for me   public constructor private readonly router  Router        public ngOnInit        this router getCurrentNavigation   previousNavigation initialUrl toString        The initial url will be the previous url page

User · Answer

FOR ANGULAR 7  Actually since Angular 7 2 there is not need to use a service for saving the previous url  You could just use the state object to set the last url before linking to the login page  Here is an example for a login scenario   Component          class SomePageComponent     constructor private router  Router        checkLogin         if   this auth loggedIn            this router navigate   login      state    redirect  this router url                     Component        class LoginComponent     constructor private router  Router        backToPreviousPage         const   redirect     window history state       this router navigateByUrl redirect      homepage            ---------------- Additionally you could also pass the data in the template   Component     template    lt a routerLink  quot  some-route quot   state   quot   redirect  router url  quot  gt Go to some route lt  a gt      class SomePageComponent     constructor public router  Router

User · Answer

Maybe all other answers are for angular 2 X  Now it doesn t work for angular 5 X  I m working with it  with only NavigationEnd  you can not get previous url  because Router works from  quot NavigationStart quot    quot RoutesRecognized quot       to  quot NavigationEnd quot   You can check with     router events forEach  event    gt      console log event        But still you can not get previous url even with  quot NavigationStart quot   Now you need to use pairwise  import  rxjs add operator filter   import  rxjs add operator pairwise    constructor private router  Router      this router events      filter e   gt  e instanceof RoutesRecognized       pairwise        subscribe  event  any      gt          console log event 0  urlAfterRedirects                   With pairwise  You can see what url is from and to   quot RoutesRecognized quot  is the changing step from origin to target url  so filter it and get previous url from it  Last but not least  put this code in parent component or higher  ex  app component ts  because this code fires after finish routing  Update angular 6  The events filter gives error because filter is not part of events  so change the code to import   filter  pairwise   from  rxjs operators    this router events  pipe filter  evt  any    gt  evt instanceof RoutesRecognized   pairwise     subscribe  events  RoutesRecognized      gt      console log  previous url   events 0  urlAfterRedirects     console log  current url   events 1  urlAfterRedirects

User · Answer

Pretty simple by using previousNavigation object   this router events    pipe      filter e   gt  e instanceof NavigationEnd  amp  amp  this router getCurrentNavigation   previousNavigation       map      gt  this router getCurrentNavigation   previousNavigation finalUrl toString            subscribe previousUrl   gt

User · Answer

G  nterZ  chbauer also you can save it in localstorage but I not prefer it   better to save in service and get this value from there   constructor          private router  Router                   this router events            subscribe  event    gt                if  event instanceof NavigationEnd                  localStorage setItem  previousUrl   event url

User · Answer

You can use Location as mentioned here   Here s my code if the link opened on new tab  navBack         let cur path   this location path        this location back        if  cur path     this location path         this router navigate    default-route               Required imports  import   Router   from   angular router   import   Location   from   angular common

User · Answer

Angular 6 updated code for getting previous url as string   import   Router  RoutesRecognized   from   angular router   import   filter  pairwise   from  rxjs operators     export class AppComponent implements OnInit        constructor           public router  Router                    ngOnInit             this router events              pipe filter  e  any    gt  e instanceof RoutesRecognized                   pairwise                 subscribe  e  any    gt                    console log e 0  urlAfterRedirects      previous url

User · Answer

This simple solution worked for me  import  rxjs add operator pairwise   import   Router   from   angular router    export class TempComponent       constructor private router  Router            this router events pairwise   subscribe  event    gt                console log event      NavigationEnd will have last and current visit url

User · Answer

You can subscribe to route changes and store the current event so you can use it when the next happens previousUrl  string  constructor router  Router      router events    pipe filter event   gt  event instanceof NavigationEnd      subscribe  event  NavigationEnd    gt        console log  prev    event url       this previousUrl   event url           See also How to detect a route change in Angular

[angular] How to determine previous page URL in Angular?

Examples related to angular

Examples related to angular2-routing