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

resolves #24750

Author: liamdebeasi

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',

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');
+  });
 });

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');