feat: add new api for creating interactive angular component formatters

src/app/modules/angular-slickgrid/services/angularUtil.service.ts

@@ -17,6 +17,31 @@ export class AngularUtilService {
 
   constructor(private vcr: ViewContainerRef) { }
 
+  createInteractiveAngularComponent<C>(component: Type<C>, targetElement: Element, data?: any, createCompOptions?: CreateComponentOption): AngularComponentOutput {
+    // Create a component reference from the component
+    const componentRef = this.vcr.createComponent(component, createCompOptions);
+
+    // user could provide data to assign to the component instance
+    if (componentRef?.instance && data) {
+      Object.assign(componentRef.instance as any, data);
+    }
+
+    // Get DOM element from component
+    let domElem: HTMLElement | null = null;
+    const viewRef = (componentRef.hostView as EmbeddedViewRef<any>);
+
+    if (viewRef && Array.isArray(viewRef.rootNodes) && viewRef.rootNodes[0]) {
+      domElem = viewRef.rootNodes[0] as HTMLElement;
+
+      // when user provides the DOM element target, we will move the dynamic component into that target (aka portal-ing it)
+      if (targetElement && domElem) {
+        targetElement.replaceChildren(componentRef.location.nativeElement);
+      }
+    }
+
+    return { componentRef, domElement: domElem as HTMLElement };
+  }
+
   /**
    * Dynamically create an Angular component, user could also provide optional arguments for target, data & createComponent options
    * @param {Component} component
@@ -33,7 +58,7 @@ export class AngularUtilService {
     if (componentRef?.instance && data) {
       Object.assign(componentRef.instance as any, data);
 
-      // NOTE: detectChanges() MUST be doene BEFORE returning the DOM element in the next step,
+      // NOTE: detectChanges() MUST be done BEFORE returning the DOM element in the next step,
       // because if we do it only after returning the rootNodes (domElement) then it won't have the instance data yet
       // and we would have to wait an extra cycle to see the result, this basically helps with Example22
       componentRef.changeDetectorRef.detectChanges();