feat: add modal component and service for dynamic modal handling in example 11

Author: sonusindhu

…s/advanced/example11/example11.module.ts …ed/example11/example11.component.html.mdsrc/app/examples/advanced/example11/example11.module.ts renamed to assets/examples/advanced/example11/example11.component.html.md src/app/examples/advanced/example11/example11.module.ts renamed to assets/examples/advanced/example11/example11.component.html.md

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ModalRef } from './custom-model/model.ref';
+import { ModalRef } from './model.ref';
 
 @Component({
  selector: 'app-confirm-modal',
@@ -14,18 +14,41 @@ import { ModalRef } from './custom-model/model.ref';
  `,
  styles: [`
  .backdrop {
- position: fixed; inset: 0;
+ position: fixed;
+ inset: 0;
  background: rgba(0,0,0,0.5);
+ z-index: 1000;
  }
  .modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
- background: white;
- padding: 1rem;
- border-radius: 8px;
- box-shadow: 0 4px 10px rgba(0,0,0,0.3);
- z-index: 1000;
+ background: #fff;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+ min-width: 320px;
+ min-height: 120px;
+ z-index: 1001;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ }
+ .modal h2 {
+ margin-bottom: 0.5rem;
+ font-size: 1.3rem;
+ font-weight: 600;
+ }
+ .modal p {
+ color: #555;
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ }
+ .modal button {
+ min-width: 100px;
+ font-size: 1rem;
+ margin: 0 0.5rem;
  }
  `]
 })

…app/examples/advanced/example11/index.ts …nced/example11/example11.component.ts.mdsrc/app/examples/advanced/example11/index.ts renamed to assets/examples/advanced/example11/example11.component.ts.md src/app/examples/advanced/example11/index.ts renamed to assets/examples/advanced/example11/example11.component.ts.md

@@ -21,6 +21,16 @@ export class ModalService {
  }
 
  open<T extends object>(component: Type<T>, inputs?: Partial<T>): ModalRef<T> {
+ // Always (re)create the modal container if missing
+ let existing = document.getElementById('app-modal-container');
+ if (existing) {
+ this.modalContainer = existing;
+ } else {
+ this.modalContainer = document.createElement('div');
+ this.modalContainer.id = 'app-modal-container';
+ document.body.appendChild(this.modalContainer);
+ }
+
  // 1. Create container
  const containerRef = createComponent(ModalContainerComponent, {
  environmentInjector: this.appRef.injector as EnvironmentInjector,
@@ -38,11 +48,18 @@ export class ModalService {
 
  // 3. Build ModalRef for inner component
  const modalRef = new ModalRef(cmpRef);
-
- // optional: allow modal to close itself
  (cmpRef.instance as any).modalRef = modalRef;
 
- // return reference to **inner component**
+ // Remove modal and container from DOM on close/confirm
+ const removeModal = () => {
+ this.appRef.detachView(containerRef.hostView);
+ if (this.modalContainer.parentNode) {
+ this.modalContainer.parentNode.removeChild(this.modalContainer);
+ }
+ };
+ modalRef.onClose.subscribe(removeModal);
+ modalRef.onConfirm.subscribe(removeModal);
+
  return modalRef;
  }
 }

…ples/advanced/example11/modal.service.ts …s/advanced/example11/modal.service.ts.mdsrc/app/examples/advanced/example11/modal.service.ts renamed to assets/examples/advanced/example11/modal.service.ts.md src/app/examples/advanced/example11/modal.service.ts renamed to assets/examples/advanced/example11/modal.service.ts.md

@@ -40,12 +40,31 @@ export class ModalContainerComponent implements OnDestroy {
  Object.assign(this.childRef.instance, inputs);
  }
  (this.childRef.instance as any).modalRef = this.modalRef;
+
+ // Listen for close and confirm events to destroy modal
+ if (this.modalRef) {
+ this.modalRef.onClose.subscribe(() => {
+ this.removeModal();
+ });
+ this.modalRef.onConfirm.subscribe(() => {
+ this.removeModal();
+ });
+ }
  }
 
  onBackdropClick() {
  this.modalRef.close();
  }
 
+ removeModal() {
+ this.childRef?.destroy();
+ // Remove modal container from DOM
+ const el = (this.vc.element.nativeElement as HTMLElement).parentElement?.parentElement;
+ if (el && el.parentElement) {
+ el.parentElement.removeChild(el);
+ }
+ }
+
  ngOnDestroy() {
  this.childRef?.destroy();
  }

…es/advanced/example11/modal.component.ts …xample11/custom-model/modal.component.tssrc/app/examples/advanced/example11/modal.component.ts renamed to src/app/examples/advanced/example11/custom-model/modal.component.ts src/app/examples/advanced/example11/modal.component.ts renamed to src/app/examples/advanced/example11/custom-model/modal.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { ModalService } from './custom-model/modal.service';
-import { ConfirmModalComponent } from './modal.component';
+import { ConfirmModalComponent } from './custom-model/modal.component';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';

src/app/examples/advanced/example11/custom-model/modal.service.ts

@@ -0,0 +1,6 @@
+```html
+<div class="demo-section">
+ <button mat-flat-button color="primary" (click)="openModal()">Open Modal</button>
+ <ng-template #modalContainer></ng-template>
+</div>
+```

src/app/examples/advanced/example11/custom-model/model-container.component.ts

@@ -0,0 +1,24 @@
+```scss
+/* src/app/examples/advanced/example11/example11.component.scss */
+:host {
+ display: contents;
+ 
+ .modal-backdrop {
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background: rgba(0,0,0,0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ }
+ .modal-content {
+ background: #fff;
+ padding: 2rem;
+ border-radius: 8px;
+ min-width: 300px;
+ min-height: 100px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+ }
+}
+```

src/app/examples/advanced/example11/example11.component.ts

@@ -0,0 +1,32 @@
+```typescript
+import { Component, inject } from '@angular/core';
+import { ModalService } from './custom-model/modal.service';
+import { ConfirmModalComponent } from './custom-model/modal.component';
+
+@Component({
+ selector: 'app-advanced-example11',
+ standalone: true,
+ imports: [],
+ templateUrl: './example11.component.html',
+ styleUrls: ['./example11.component.scss']
+})
+export class Example11Component {
+ private modalService = inject(ModalService);
+
+ openModal() {
+ const modalRef = this.modalService.open(ConfirmModalComponent, {
+ title: 'Delete Item?',
+ message: 'Are you sure you want to delete this record?'
+ });
+
+ modalRef.onClose.subscribe(() => {
+ console.log('Modal closed');
+ });
+
+ modalRef.onConfirm.subscribe(() => {
+ console.log('Confirmed action');
+ });
+
+ }
+}
+```