feat: remote component - slot - slot owner binding

libs/angular-remote-components/src/lib/components/slot/slot.component.ts

@@ -1,6 +1,8 @@
 import {
   Component,
+  ComponentRef,
   ContentChild,
+  EventEmitter,
   Inject,
   Input,
   OnDestroy,
@@ -25,6 +27,34 @@ export class SlotComponent implements OnInit, OnDestroy {
   @Input()
   name!: string
 
+  private _assignedComponents$ = new BehaviorSubject<(ComponentRef<any> | HTMLElement)[]>([])
+
+  private _inputs$ = new BehaviorSubject<Record<string, unknown>>({})
+  @Input()
+  get inputs(): Record<string, unknown> {
+    return this._inputs$.getValue()
+  }
+  set inputs(value: Record<string, unknown>) {
+    this._inputs$.next({
+      ...this._inputs$.getValue(),
+      ...value,
+    })
+  }
+
+  private _outputs$ = new BehaviorSubject<Record<string, EventEmitter<any>>>({})
+  @Input()
+  get outputs(): Record<string, EventEmitter<any>> {
+    return this._outputs$.getValue()
+  }
+  set outputs(value: Record<string, EventEmitter<any>>) {
+    this._outputs$.next({
+      ...this._outputs$.getValue(),
+      ...value,
+    })
+  }
+
+  updateDataSub: Subscription | undefined
+
   _viewContainers$ = new BehaviorSubject<QueryList<ViewContainerRef> | undefined>(undefined)
   @ViewChildren('slot', { read: ViewContainerRef })
   set viewContainers(value: QueryList<ViewContainerRef>) {
@@ -40,6 +70,13 @@ export class SlotComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.components$ = this.slotService.getComponentsForSlot(this.name)
+    this.updateDataSub = combineLatest([this._assignedComponents$, this._inputs$, this._outputs$]).subscribe(
+      ([components, inputs, outputs]) => {
+        components.forEach((component) => {
+          this.updateComponentData(component, inputs, outputs)
+        })
+      }
+    )
     this.subscription = combineLatest([this._viewContainers$, this.components$]).subscribe(
       ([viewContainers, components]) => {
         if (viewContainers && viewContainers.length === components.length) {
@@ -49,7 +86,8 @@ export class SlotComponent implements OnInit, OnDestroy {
                 Promise.resolve(componentInfo.componentType),
                 Promise.resolve(componentInfo.permissions),
               ]).then(([componentType, permissions]) => {
-                this.createComponent(componentType, componentInfo, permissions, viewContainers, i)
+                const component = this.createComponent(componentType, componentInfo, permissions, viewContainers, i)
+                if (component) this._assignedComponents$.next([...this._assignedComponents$.getValue(), component])
               })
             }
           })
@@ -64,7 +102,7 @@ export class SlotComponent implements OnInit, OnDestroy {
     permissions: string[],
     viewContainers: QueryList<ViewContainerRef>,
     i: number
-  ) {
+  ): ComponentRef<any> | HTMLElement | undefined {
     const viewContainer = viewContainers.get(i)
     viewContainer?.clear()
     viewContainer?.element.nativeElement.replaceChildren()
@@ -79,6 +117,7 @@ export class SlotComponent implements OnInit, OnDestroy {
         })
       }
       componentRef?.changeDetectorRef.detectChanges()
+      return componentRef
     } else if (
       componentInfo.remoteComponent.technology === Technologies.WebComponentModule ||
       componentInfo.remoteComponent.technology === Technologies.WebComponentScript
@@ -92,11 +131,36 @@ export class SlotComponent implements OnInit, OnDestroy {
           permissions: permissions,
         } satisfies RemoteComponentConfig
         viewContainer?.element.nativeElement.appendChild(element)
+        return element
       }
     }
+
+    return
+  }
+
+  private updateComponentData(
+    component: ComponentRef<any> | HTMLElement | undefined,
+    inputs: Record<string, unknown>,
+    outputs: Record<string, EventEmitter<unknown>>
+  ) {
+    this.setProps(component, inputs)
+    this.setProps(component, outputs)
+  }
+
+  private setProps(component: ComponentRef<any> | HTMLElement | undefined, props: Record<string, unknown>) {
+    if (!component) return
+
+    Object.entries(props).map(([name, value]) => {
+      if (component instanceof HTMLElement) {
+        ;(component as any)[name] = value
+      } else {
+        component.setInput(name, value)
+      }
+    })
   }
 
   ngOnDestroy(): void {
     this.subscription?.unsubscribe()
+    this.updateDataSub?.unsubscribe()
   }
 }