Function createComponent

packages/angular/src/lib/slots/slot.utils.ts:89–139

* Creates a component and applies properties.

(
  viewContainer: ViewContainerRef,
  component: Type<T>,
  props?: Partial<T>,
  injector?: Injector,
  outputs?: Record<string, (event: any) => void>,
)

 * Creates a component and applies properties.
 */
function createComponent<T>(
  viewContainer: ViewContainerRef,
  component: Type<T>,
  props?: Partial<T>,
  injector?: Injector,
  outputs?: Record<string, (event: any) => void>,
): ComponentRef<T> {
  const componentRef = viewContainer.createComponent(component, {
    injector,
  });

  if (props) {
    // Apply props using setInput, but only for declared inputs
    const cmpDef: any = (component as any).ɵcmp;
    const declaredInputs = new Set<string>(Object.keys(cmpDef?.inputs ?? {}));

    if (declaredInputs.has("props")) {
      componentRef.setInput("props", props as any);
    } else {
      for (const key in props) {
        if (declaredInputs.has(key)) {
          const value = (props as any)[key];
          componentRef.setInput(key, value);
        }
      }
    }
  }

  if (outputs) {
    // Wire up output event handlers with proper cleanup
    const instance = componentRef.instance as any;
    const subscriptions: any[] = [];

    for (const [eventName, handler] of Object.entries(outputs)) {
      if (instance[eventName]?.subscribe) {
        const subscription = instance[eventName].subscribe(handler);
        subscriptions.push(subscription);
      }
    }

    // Register cleanup on component destroy
    componentRef.onDestroy(() => {
      subscriptions.forEach((sub) => sub.unsubscribe());
    });
  }

  // Trigger change detection
  componentRef.changeDetectorRef.detectChanges();

  return componentRef;
}

/**
 * Checks if a value is a component type.