feat(angular): add standalone back-button

packages/angular/common/src/directives/navigation/back-button.ts

@@ -1,27 +1,41 @@
-import { Directive, HostListener, Input, Optional } from '@angular/core';
+import { Directive, HostListener, Input, Optional, ElementRef, NgZone } from '@angular/core';
 import type { AnimationBuilder } from '@ionic/core/components';
 
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
+import { ProxyCmp } from '../../utils/proxy';
 
 import { IonRouterOutlet } from './router-outlet';
 
+const BACK_BUTTON_INPUTS = ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'routerAnimation', 'text', 'type'];
+
+@ProxyCmp({
+  inputs: BACK_BUTTON_INPUTS,
+})
 @Directive({
   selector: 'ion-back-button',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: BACK_BUTTON_INPUTS,
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonBackButton {
+export class IonBackButtonDelegate {
   @Input()
   defaultHref: string | undefined | null;
 
   @Input()
   routerAnimation?: AnimationBuilder;
 
+  protected el: HTMLElement;
+
   constructor(
     @Optional() private routerOutlet: IonRouterOutlet,
     private navCtrl: NavController,
-    private config: Config
-  ) {}
+    private config: Config,
+    private r: ElementRef,
+    protected z: NgZone
+  ) {
+    this.el = this.r.nativeElement;
+  }
 
   /**
    * @internal

packages/angular/common/src/index.ts

@@ -23,7 +23,7 @@ export { NavParams } from './directives/navigation/nav-params';
 export { IonRouterOutlet, INPUT_BINDER, RoutedComponentInputBinder } from './directives/navigation/router-outlet';
 export type { StackEvent } from './directives/navigation/stack-utils';
 
-export { IonBackButton } from './directives/navigation/back-button';
+export { IonBackButtonDelegate } from './directives/navigation/back-button';
 export {
   RouterLinkDelegateDirective,
   RouterLinkWithHrefDelegateDirective,

packages/angular/src/directives/navigation/ion-back-button.ts

@@ -1,14 +1,20 @@
-import { Directive, Optional } from '@angular/core';
-import { IonBackButton as IonBackButtonBase, NavController, Config } from '@ionic/angular/common';
+import { Directive, Optional, ElementRef, NgZone } from '@angular/core';
+import { IonBackButtonDelegate as IonBackButtonDelegateBase, NavController, Config } from '@ionic/angular/common';
 
 import { IonRouterOutlet } from './ion-router-outlet';
 
 @Directive({
   selector: 'ion-back-button',
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export class IonBackButtonDelegateDirective extends IonBackButtonBase {
-  constructor(@Optional() routerOutlet: IonRouterOutlet, navCtrl: NavController, config: Config) {
-    super(routerOutlet, navCtrl, config);
+export class IonBackButtonDelegateDirective extends IonBackButtonDelegateBase {
+  constructor(
+    @Optional() routerOutlet: IonRouterOutlet,
+    navCtrl: NavController,
+    config: Config,
+    r: ElementRef,
+    z: NgZone
+  ) {
+    super(routerOutlet, navCtrl, config, r, z);
   }
 }

packages/angular/standalone/src/index.ts

@@ -1 +1,2 @@
+export { IonBackButton } from './navigation/back-button';
 export { IonRouterOutlet } from './navigation/router-outlet';

packages/angular/standalone/src/navigation/back-button.ts

@@ -0,0 +1,32 @@
+import { Component, Optional, ChangeDetectionStrategy, ElementRef, NgZone } from '@angular/core';
+import {
+  IonBackButtonDelegate as IonBackButtonDelegateBase,
+  NavController,
+  Config,
+  ProxyCmp,
+} from '@ionic/angular/common';
+import { defineCustomElement } from '@ionic/core/components/ion-back-button.js';
+
+import { IonRouterOutlet } from './router-outlet';
+
+@ProxyCmp({
+  defineCustomElementFn: defineCustomElement,
+})
+@Component({
+  selector: 'ion-back-button',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  standalone: true,
+})
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export class IonBackButton extends IonBackButtonDelegateBase {
+  constructor(
+    @Optional() routerOutlet: IonRouterOutlet,
+    navCtrl: NavController,
+    config: Config,
+    r: ElementRef,
+    z: NgZone
+  ) {
+    super(routerOutlet, navCtrl, config, r, z);
+  }
+}

packages/angular/test/base/e2e/src/standalone/back-button.spec.ts

@@ -0,0 +1,14 @@
+describe('Back Button', () => {
+  beforeEach(() => {
+    cy.visit('/standalone/back-button');
+  })
+
+  it('should be visible and navigate back to page', () => {
+    cy.ionPageVisible('app-back-button');
+
+    cy.get('ion-back-button').click();
+
+    cy.ionPageDoesNotExist('app-back-button');
+    cy.ionPageVisible('app-router-outlet');
+  });
+})

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -8,6 +8,7 @@ export const routes: Routes = [
     children: [
       { path: 'test', loadComponent: () => import('../test/test.component').then(m => m.TestComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(m => m.RouterOutletComponent) },
+      { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(m => m.BackButtonComponent) },
     ]
   },
 ];

packages/angular/test/base/src/app/standalone/back-button/back-button.component.html

@@ -0,0 +1 @@
+<ion-back-button text="Go Back" defaultHref="/standalone/router-outlet"></ion-back-button>

packages/angular/test/base/src/app/standalone/back-button/back-button.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IonBackButton } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-back-button',
+  templateUrl: './back-button.component.html',
+  standalone: true,
+  imports: [IonBackButton]
+})
+export class BackButtonComponent {}