I have the following code to detect the back button press using angular 6.

import { Location } from '@angular/mon';
export class ProductsComponent implements OnInit {

constructor( private location: Location){
  this.handleBackButtonPress();
}
  handleBackButtonPress() {
    this.subscribed = true;
    this.location.subscribe(redirect => {
     if (redirect.pop === true) {
      alert('this is a backbutton click');
     }
    });
  }
}

This is working and we got alert on back button press. The problem is If we visit the same page more than once it will trigger the alert with the number of time we visited the route with the same ponent.

Note: I have checked for a solution like this.location.unsubscribe(), But failed to find a function like that for location.

I have the following code to detect the back button press using angular 6.

import { Location } from '@angular/mon';
export class ProductsComponent implements OnInit {

constructor( private location: Location){
  this.handleBackButtonPress();
}
  handleBackButtonPress() {
    this.subscribed = true;
    this.location.subscribe(redirect => {
     if (redirect.pop === true) {
      alert('this is a backbutton click');
     }
    });
  }
}

This is working and we got alert on back button press. The problem is If we visit the same page more than once it will trigger the alert with the number of time we visited the route with the same ponent.

Note: I have checked for a solution like this.location.unsubscribe(), But failed to find a function like that for location.

• javascript
• angular
• typescript

Share Improve this question Follow edited Apr 8, 2019 at 13:17 labu4bd 70155 silver badges1313 bronze badges asked Apr 8, 2019 at 13:04 Shijin TRShijin TR 7,7881111 gold badges6363 silver badges125125 bronze badges 1

• About unsubscribing: stackoverflow./questions/48729990/… . About the solution: you should unsubscribe when the event onbeforeunload of the browser is fired. Otherwise, ngOnDestroy won't be called, because it's not directly angular destroying the ponent. – briosheje Commented Apr 8, 2019 at 13:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You just need to unsubscribe when the ponent is destroyed by the ngOnDestroy lifecycle hook.

import { Location } from '@angular/mon';
import { SubscriptionLike } from 'rxjs';

export class ProductsComponent implements OnInit, OnDestroy {

  public subscription: SubscriptionLike;

  constructor(private location: Location){
    this.handleBackButtonPress();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  handleBackButtonPress() {
    this.subscription = this.location.subscribe(redirect => {
      if (redirect.pop === true) {
        alert('this is a backbutton click');
      }
    });
  }
}

As mentioned by briosheje in the ments the lifecycle hook does not run on browser refreshes. For that you'll need to handle the unsubscription on the document's onbeforereload event.

The problem, I analyzed here is, every time whenever constructor will run. It will call your function for sure. So you have to check whether this function has been run previously or not. Simplest answer is

constructor( private location: Location){
 const PopCalled = localStorage.getItem('PopCalled')
 if(!PopCalled)
  this.handleBackButtonPress();
}

handleBackButtonPress() {
 this.subscribed = true;
  this.location.subscribe(redirect => {
  if (redirect.pop === true) {
  localStorage.setItem('PopCalled', true);
  alert('this is a backbutton click');
  }
 });
}

Basically, you have to manage the state of PopCalled its up to you which way you want to choose, as per my knowledge this is the simplest way.