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

• 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

2 Answers 2

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.