feat: add a service that projects to modal container

npm/ng-packs/packages/theme-shared/src/lib/services/index.ts

@@ -1,2 +1,3 @@
 export * from './confirmation.service';
+export * from './modal.service';
 export * from './toaster.service';

npm/ng-packs/packages/theme-shared/src/lib/services/modal.service.ts

@@ -0,0 +1,47 @@
+import { ContentProjectionService, PROJECTION_STRATEGY } from '@abp/ng.core';
+import { ComponentRef, Injectable, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ModalContainerComponent } from '../components/modal/modal-container.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalService {
+  private containerComponentRef: ComponentRef<ModalContainerComponent>;
+
+  constructor(private contentProjectionService: ContentProjectionService) {
+    this.setContainer();
+  }
+
+  private setContainer() {
+    this.containerComponentRef = this.contentProjectionService.projectContent(
+      PROJECTION_STRATEGY.AppendComponentToBody(ModalContainerComponent),
+    );
+
+    this.containerComponentRef.changeDetectorRef.detectChanges();
+  }
+
+  clearModal() {
+    this.getContainer().clear();
+    this.detectChanges();
+  }
+
+  detectChanges() {
+    this.containerComponentRef.changeDetectorRef.detectChanges();
+  }
+
+  getContainer(): ViewContainerRef {
+    return this.containerComponentRef.instance.container;
+  }
+
+  renderTemplate<T extends any>(template: TemplateRef<T>, context?: T) {
+    const containerRef = this.getContainer();
+
+    const strategy = PROJECTION_STRATEGY.ProjectTemplateToContainer(
+      template,
+      containerRef,
+      context,
+    );
+
+    this.contentProjectionService.projectContent(strategy);
+  }
+}

npm/ng-packs/packages/theme-shared/src/lib/tests/modal.service.spec.ts

@@ -0,0 +1,87 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import { ModalContainerComponent } from '../components/modal/modal-container.component';
+import { ModalService } from '../services';
+
+describe('ModalContainerComponent', () => {
+  @Component({
+    template: `
+      <ng-template #ref>
+        <div class="foo">bar</div>
+      </ng-template>
+    `,
+  })
+  class TestComponent {
+    @ViewChild('ref', { static: true })
+    template: TemplateRef<any>;
+
+    constructor(public service: ModalService) {}
+  }
+
+  let spectator: Spectator<TestComponent>;
+  let service: ModalService;
+
+  const createComponent = createComponentFactory({
+    component: TestComponent,
+    entryComponents: [ModalContainerComponent],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+    service = spectator.component.service;
+  });
+
+  afterEach(() => {
+    service.getContainer().clear();
+    service['containerComponentRef'].changeDetectorRef.detectChanges();
+    service['containerComponentRef'].destroy();
+  });
+
+  describe('#getContainer', () => {
+    it('should return the ViewContainerRef of ModalContainerComponent', () => {
+      let foo = document.querySelector('div.foo');
+      expect(foo).toBeNull();
+
+      const containerRef = service.getContainer();
+      const embeddedViewRef = containerRef.createEmbeddedView(spectator.component.template);
+
+      foo = document.querySelector('div.foo');
+      expect(foo).toBe(embeddedViewRef.rootNodes[0]);
+      expect(foo.textContent).toBe('bar');
+    });
+  });
+
+  describe('#renderTemplate', () => {
+    it('should render given template using the ViewContainerRef of ModalContainerComponent', () => {
+      let foo = document.querySelector('div.foo');
+      expect(foo).toBeNull();
+
+      service.renderTemplate(spectator.component.template);
+
+      foo = document.querySelector('div.foo');
+      expect(foo.textContent).toBe('bar');
+    });
+  });
+
+  describe('#detectChanges', () => {
+    it('should call detectChanges on the containerComponentRef', () => {
+      const spy = jest.spyOn(service['containerComponentRef'].changeDetectorRef, 'detectChanges');
+
+      service.detectChanges();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('#clearModal', () => {
+    it('should call clear on the ViewContainerRef and detectChanges', () => {
+      const clear = jest.spyOn(service.getContainer(), 'clear');
+      const detectChanges = jest.spyOn(service, 'detectChanges');
+
+      service.clearModal();
+
+      expect(clear).toHaveBeenCalledTimes(1);
+      expect(detectChanges).toHaveBeenCalledTimes(1);
+    });
+  });
+});