feat(angular): add standalone modal (#27885)

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

@@ -7,6 +7,7 @@ export const routes: Routes = [
     component: AppComponent,
     children: [
       { path: 'test', loadComponent: () => import('../test/test.component').then(m => m.TestComponent) },
+      { path: 'modal', loadComponent: () => import('../modal/modal.component').then(m => m.ModalComponent) },
       { 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/modal/modal.component.html

@@ -0,0 +1,7 @@
+<button id="open-modal">Open Modal</button>
+
+<ion-modal trigger="open-modal">
+  <ng-template>
+    <div class="ion-padding" id="modal-content">This is my modal content</div>
+  </ng-template>
+</ion-modal>

packages/angular/test/base/src/app/standalone/modal/modal.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IonModal } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './modal.component.html',
+  standalone: true,
+  imports: [IonModal]
+})
+export class ModalComponent {
+}