Merge pull request #127 from sonusindhu/signal-forms

Signal forms - example 11, 12

Author: sonusindhu

src/app/examples/advanced/example11/example11.module.ts renamed to assets/examples/advanced/example11/example11.component.html.md

@@ -0,0 +1,30 @@
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class CustomPreloadingStrategy implements PreloadingStrategy {
+ private preloadTriggers: { [key: string]: Subject<void> } = {};
+
+ preload(route: Route, load: () => Observable<any>): Observable<any> {
+ console.log('CustomPreloadingStrategy: Checking route', route.data, route.path);
+ if (route.data && route.data['preloadOnDemand']) {
+ if (!this.preloadTriggers[route.path!]) {
+ this.preloadTriggers[route.path!] = new Subject<void>();
+ }
+ return this.preloadTriggers[route.path!].asObservable().pipe(
+ // When triggered, start loading
+ switchMap(() => load())
+ );
+ }
+ // Default: do not preload
+ return new Observable<any>();
+ }
+
+ triggerPreload(path: string) {
+ if (this.preloadTriggers[path]) {
+ this.preloadTriggers[path].next();
+ }
+ }
+}

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

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { CustomPreloadingStrategy } from './custom-preloading.strategy';
+
+@Injectable({ providedIn: 'root' })
+export class PreloadService {
+ constructor(private strategy: CustomPreloadingStrategy) {}
+
+ preload(path: string) {
+ this.strategy.triggerPreload(path);
+ }
+}

src/app/examples/advanced/example11/modal.service.ts renamed to assets/examples/advanced/example11/modal.service.ts.md

@@ -61,5 +61,9 @@ const ADVANCED_ROUTES: Route[] = [
  loadComponent: () =>
  import('./example11/example11.component').then(x => x.Example11Component),
  },
+ {
+ path: 'example12',
+ loadChildren: () => import('./example12/example12-routings'),
+ },
 ]
 export default ADVANCED_ROUTES;

src/app/core/preloading/custom-preloading.strategy.ts

@@ -51,4 +51,14 @@ export const ADVANCED_EXAMPLES: ExampleModel[] = [
  content: 'A real-time collaborative list using Angular signals and the browser storage event. Add, edit, or remove items and see changes sync instantly across tabs/windows—no backend required.',
  routerLink: 'example10',
  },
+ {
+ title: 'Modal Service with ViewContainerRef',
+ content: 'Open a modal using a service and ViewContainerRef. Demonstrates dynamic component creation and service-driven modals.',
+ routerLink: 'example11',
+ },
+ {
+ title: 'On-Demand Preloading via Service & Custom Strategy',
+ content: 'Preload modules only when triggered (e.g., on hover) using a service and custom PreloadingStrategy. Demonstrates bandwidth savings and modern Angular routing.',
+ routerLink: 'example12',
+ },
 ];

src/app/core/preloading/preload.service.ts

@@ -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;
  }
  `]
 })

src/app/examples/advanced/advanced-routings.ts

@@ -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;
  }
 }

src/app/examples/advanced/advanced.const.ts

@@ -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();
  }