Close angular modal and remain on same page on back button click

Question

I am developing a web application using Angular 6 that uses angular modal. On my phone (Android), I noticed that clicking the phone's back button when a modal is open doesn't only dismiss the open modal, but also navigates back to the previous page. Is it possible to close the open dialog only instead and remain on the main page? I think this would be the expected behavior on a mobile phone.

Thanks!

Answer 1

@Simo, is some complex. In Cordova, you have an event "deviceready" that you can use to control the events pause, resume and backbutton.

Read the official docs to convert a web application to a movil app.

You can see that Cordova add new events to "document". https://cordova.apache.org/docs/en/latest/cordova/events/events.html

Well How adding this to our Angular application?

For me, the best way is change the AppComponent (the main component) to add the new events and use a service to make all the process transparent.

In the AfterViewInit of the AppComponent (the main component) we are going to add the document.addEventListener for ready, pause, resume and backbutton

//we use a enum for the different events.
export enum CordovaEvent {BackButton,Resume,Pause}

export class AppComponent implements AfterViewInit{

  constructor(private cordovaEventService:CordovaEventService) { }

  ngAfterViewInit() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  }
  onDeviceReady() {
    // Control pause, resume and backbutton
    document.addEventListener('pause', this.onPause.bind(this), false);
    document.addEventListener('resume', this.onResume.bind(this), false);
    document.addEventListener("backbutton", this.onBackKeyDown.bind(this), false);
    //a variable that I can use to know if is really a movil application 
    this.cordovaEventService.isCordoba=true;

  };

  onPause() {
    //the only thing that I make is execute a function in a service
    this.cordovaEventService.sendEvent(CordovaEvent.Pause);
  };

  onResume() {
    this.cordovaEventService.sendEvent(CordovaEvent.Resume);
  };

  onBackKeyDown(e) {
    this.cordovaEventService.sendEvent(CordovaEvent.BackButton);
    e.preventDefault();
    e.stopPropagation();

  };
}

Our service is very simple. just a private subject and a Observable that can be subscribe for our components.

@Injectable()

export class CordovaEventService {

    private listeningSource:Subject<CordovaEvent>=new Subject<CordovaEvent>();
    cordovaEvent:Observable<CordovaEvent>=this.listeningSource.asObservable();

    isCordoba:boolean=false;

    constructor() {
    }
    sendEvent(evento:CordovaEvent)
    {
        this.listeningSource.next(evento);
    }
}

Finally, any component can subscribe to cordovaEvent in ngOnInit

  ngOnInit() {
    this.cordovaEventService.cordovaEvent.subscribe((evento: CordovaEvent) => {
      if (evento == CordovaEvent.BackButton) {
        this.ngZone.run(()=>{
          ....make something...
        })
      }
    });
  }

Answer 2

i tried this and it seems to work

// push history state when a dialog is opened
dialogRef.afterOpened.subscribe((ref: MatDialogRef<any, any>) => {
  window.history.pushState(ref.id, '');
  // pop from history if dialog has not been closed with back button, and gurrent state is still ref.id
  ref.afterClosed().subscribe(() => {
    if (history.state === ref.id) {
      window.history.go(-1);
    }
  });
});

Answer 3

try this

import { Router, Event } from '@angular/router';  

constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      $(".modal").modal('hide');
    });
  }