fix(angular): inline modals now add .ion-page class correctly (#24751)

resolves #24750
ionic-team · Feb 9, 2022 · ef46eaf · ef46eaf
1 parent 0580d65
commit ef46eaf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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');