Add backButtonClicked event to page component

kirbydesign · Jun 8, 2022 · de9e84b · de9e84b
1 parent e5a1c1b
commit de9e84b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts b/apps/cookbook/src/app/showcase/page-showcase/page-showcase.component.ts
@@ -81,6 +81,12 @@ export class PageShowcaseComponent {
       description: 'Emitted when leaving the page',
       signature: 'func',
     },
+    {
+      name: 'backButtonClicked',
+      description:
+        'Emitted when the back-button is clicked. When bound, the default back-button click behaviour is disabled.',
+      signature: 'func',
+    },
   ];
 
   layoutColumns: ApiDescriptionPropertyColumns = {

diff --git a/libs/designsystem/src/lib/components/page/page.component.spec.ts b/libs/designsystem/src/lib/components/page/page.component.spec.ts
@@ -141,6 +141,19 @@ describe('PageComponent', () => {
     flush();
   }));
 
+  describe('with a back-button-clicked observer', () => {
+    it('should emit an event when the back button is clicked', () => {
+      const ionBackButton = spectator.queryHost('ion-toolbar ion-buttons ion-back-button');
+      const subscriber = jasmine.createSpy();
+      spectator.output('backButtonClicked').subscribe(subscriber);
+
+      spectator.click(ionBackButton);
+      spectator.detectComponentChanges();
+
+      expect(subscriber).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('pull-to-refresh', () => {
     it('should be available when "refresh" is subscribed to', () => {
       spectator.output('refresh').subscribe(() => {});

diff --git a/libs/designsystem/src/lib/components/page/page.component.ts b/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';
 
@@ -161,6 +161,7 @@ export class PageComponent
   @Output() enter = new EventEmitter<void>();
   @Output() leave = new EventEmitter<void>();
   @Output() refresh = new EventEmitter<PullToRefreshEvent>();
+  @Output() backButtonClicked = new EventEmitter<Event>();
 
   @ViewChild(IonContent, { static: true }) private content: IonContent;
   @ViewChild(IonContent, { static: true, read: ElementRef })
@@ -170,6 +171,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;
 
@@ -259,6 +262,16 @@ export class PageComponent
     this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
       this.content.scrollToTop(KirbyAnimation.Duration.LONG);
     });
+
+    // Intercept back-button click events, defaulting to the built-in click-handler.
+    if (this.backButtonClicked.length == 0) {
+      this.backButtonClicked
+        .pipe(takeUntil(this.ngOnDestroy$))
+        .subscribe(this.backButtonDelegate.onClick.bind(this.backButtonDelegate));
+    }
+    this.backButtonDelegate.onClick = (event: Event) => {
+      this.backButtonClicked.emit(event);
+    };
   }
 
   ngAfterContentChecked(): void {