From ef46eafc9476a85ea3369e542f528d01d3cca0a8 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 9 Feb 2022 10:57:21 -0500
Subject: [PATCH] fix(angular): inline modals now add .ion-page class correctly
 (#24751)

resolves #24750
---
 angular/src/directives/overlays/modal.ts    | 2 +-
 angular/test/test-app/e2e/src/modal.spec.ts | 4 ++++
 core/src/utils/framework-delegate.ts        | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/angular/src/directives/overlays/modal.ts b/angular/src/directives/overlays/modal.ts
index d0378b4eac..0032506c82 100644
--- a/angular/src/directives/overlays/modal.ts
+++ b/angular/src/directives/overlays/modal.ts
@@ -73,7 +73,7 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container>`,
+  template: `<div class="ion-page"><ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container></div>`,
   inputs: [
     'animated',
     'backdropBreakpoint',
diff --git a/angular/test/test-app/e2e/src/modal.spec.ts b/angular/test/test-app/e2e/src/modal.spec.ts
index 67b65576a2..410a6cfd75 100644
--- a/angular/test/test-app/e2e/src/modal.spec.ts
+++ b/angular/test/test-app/e2e/src/modal.spec.ts
@@ -60,4 +60,8 @@ describe('Modals: Inline', () => {
     cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
     cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
   });
+
+  it('should have a div with .ion-page', () => {
+    cy.get('ion-modal').children('.ion-page').should('exist');
+  });
 });
diff --git a/core/src/utils/framework-delegate.ts b/core/src/utils/framework-delegate.ts
index 0482ceaa47..b12a7a2f5c 100644
--- a/core/src/utils/framework-delegate.ts
+++ b/core/src/utils/framework-delegate.ts
@@ -89,7 +89,7 @@ export const CoreDelegate = () => {
       BaseComponent.appendChild(el);
 
       await new Promise(resolve => componentOnReady(el, resolve));
-    } else {
+    } else if (BaseComponent.children.length > 0) {
       // If there is no component, then we need to create a new parent
       // element to apply the css classes to.
       const el = BaseComponent.ownerDocument && BaseComponent.ownerDocument.createElement('div');