Add backButtonClicked event to page component

apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts

@@ -86,6 +86,12 @@ export class PageShowcaseComponent {
       description: 'Emitted when leaving the page',
       signature: 'func',
     },
+    {
+      name: 'backButtonClick',
+      description:
+        'Emitted when the back-button is clicked. When bound, the default back-button click behaviour is disabled.',
+      signature: 'func',
+    },
   ];
 
   layoutColumns: ApiDescriptionPropertyColumns = {

libs/designsystem/src/lib/components/page/page.component.spec.ts

@@ -206,6 +206,32 @@ describe('PageComponent', () => {
     flush();
   }));
 
+  describe('with a back-button', () => {
+    let ionBackButton;
+
+    beforeEach(() => {
+      ionBackButton = spectator.queryHost('ion-toolbar ion-buttons ion-back-button');
+    });
+
+    it('should call the default click handler if no back-button-click observer is provided', () => {
+      const defaultHandler = jasmine.createSpy();
+      ionBackButton.onclick = defaultHandler;
+
+      spectator.click(ionBackButton);
+
+      expect(defaultHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('should emit an event on click if a back-button-click observer is provided', () => {
+      const subscriber = jasmine.createSpy();
+      spectator.output('backButtonClick').subscribe(subscriber);
+
+      spectator.click(ionBackButton);
+
+      expect(subscriber).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('pull-to-refresh', () => {
     it('should be available when "refresh" is subscribed to', () => {
       spectator.output('refresh').subscribe(() => {});

libs/designsystem/src/lib/components/page/page.component.ts

@@ -25,7 +25,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router, RouterEvent } from '@angular/router';
-import { IonContent, IonFooter, IonHeader } from '@ionic/angular';
+import { IonBackButtonDelegate, IonContent, IonFooter, IonHeader } from '@ionic/angular';
 import { Observable, Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
@@ -167,6 +167,7 @@ export class PageComponent
   @Output() enter = new EventEmitter<void>();
   @Output() leave = new EventEmitter<void>();
   @Output() refresh = new EventEmitter<PullToRefreshEvent>();
+  @Output() backButtonClick = new EventEmitter<Event>();
 
   @ViewChild(IonContent, { static: true }) private content: IonContent;
   @ViewChild(IonContent, { static: true, read: ElementRef })
@@ -176,6 +177,8 @@ export class PageComponent
   @ViewChild(IonFooter, { static: true, read: ElementRef })
   private ionFooterElement: ElementRef<HTMLIonFooterElement>;
 
+  @ViewChild(IonBackButtonDelegate, { static: false })
+  private backButtonDelegate: IonBackButtonDelegate;
   @ViewChild('pageTitle', { static: false, read: ElementRef })
   private pageTitle: ElementRef;
 
@@ -272,6 +275,8 @@ export class PageComponent
     this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
       this.content.scrollToTop(KirbyAnimation.Duration.LONG);
     });
+
+    this.interceptBackButtonClicksSetup();
   }
 
   ngAfterContentChecked(): void {
@@ -324,6 +329,18 @@ export class PageComponent
     }
   }
 
+  private interceptBackButtonClicksSetup() {
+    // Intercept back-button click events, defaulting to the built-in click-handler.
+    if (this.backButtonClick.observers.length === 0) {
+      this.backButtonClick
+        .pipe(takeUntil(this.ngOnDestroy$))
+        .subscribe(this.backButtonDelegate.onClick.bind(this.backButtonDelegate));
+    }
+    this.backButtonDelegate.onClick = (event: Event) => {
+      this.backButtonClick.emit(event);
+    };
+  }
+
   private initializeTitle() {
     // Ensures initializeTitle() won't run, if already initialized
     if (this.hasPageTitle) return;

libs/designsystem/testing-base/src/lib/components/mock.page.component.ts

@@ -147,6 +147,7 @@ export class MockPageComponent {
   @Output() enter = new EventEmitter<void>();
   @Output() leave = new EventEmitter<void>();
   @Output() refresh = new EventEmitter<PullToRefreshEvent>();
+  @Output() backButtonClick = new EventEmitter<Event>();
 }
 
 // #endregion