Hardware back

import { Component, DestroyRef, inject } from '@angular/core';
import { HardwareBack } from '@ng-native/device';

@Component({ selector: 'app-unsaved-form', template: `<view />` })
export class UnsavedForm {
  private dirty = false;

  constructor() {
    const stop = inject(HardwareBack).handle(() => {
      if (!this.dirty) return false;
      this.confirmDiscard();
      return true;
    });
    inject(DestroyRef).onDestroy(stop);
  }

  private confirmDiscard(): void {}
}

This is not a signal, because a press is a question rather than a state: the platform asks whether anybody wants it, and the answer decides what happens next. handle(handler) returns an unsubscribe. React Native runs the most recently added handler first, so a screen that subscribes on mount outranks the one below it.

@ng-native/router's outlets already call this: the back button pops the stack in front, and at the root of a tab goes to the first tab (see Tabs). An app's own overlay layer is the other typical caller, to close the topmost dialog or sheet instead of backgrounding the app. Most apps never touch HardwareBack directly; it exists for the screen that wants to intercept the button itself, to confirm leaving a form with unsaved changes, for instance.

Off a device and on the web

Off a device and on iOS, handle() still returns an unsubscribe but nothing ever calls the handler, because there is no hardware back button on either. On the web there is no equivalent hardware button either; a browser's own back gesture is not the same event.

Reference