l0co · March 4, 2020 16:22 · Mar 4, 2020
diff --git a/custom-component.directive.ts b/custom-component.directive.ts
@@ -0,0 +1,59 @@
+import {ComponentFactoryResolver, ComponentRef, Directive, Type, ViewContainerRef} from '@angular/core';
+
+/**
+ * Allows to embed custom components into views.
+ *
+ * ## Usage in template
+ *
+ * ```html
+ * <ng-template appCustomComponent></ng-template>
+ * ```
+ *
+ * ## Usage in component
+ *
+ * ```typescript
+ * class MyComponentClass {
+ *
+ *   @ViewChild(CustomComponentDirective, {static: true}) customComponentContainer: CustomComponentDirective;
+ *
+ *   somewhereInCode() {
+ *     this.customComponentContainer.set(MyComponentClass);
+ *   }
+ *
+ * }
+ * ```
+ *
+ * @param C Type of dynamic component
+ * @see https://angular.io/guide/dynamic-component-loader
+ */
+@Directive({
+  selector: '[appCustomComponent]'
+})
+export class CustomComponentDirective<C = any> {
+
+  private _component?: ComponentRef<C>;
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+    private resolver: ComponentFactoryResolver,
+  ) { }
+
+  get component(): ComponentRef<C> | undefined {
+    return this._component;
+  }
+
+  cleanup() {
+    if (this._component) {
+      this._component.destroy();
+      this._component = undefined;
+      this.viewContainerRef.clear();
+    }
+  }
+
+  set(component: Type<C>) {
+    this.cleanup();
+    let configComponentFactory = this.resolver.resolveComponentFactory<C>(component);
+    this._component = this.viewContainerRef.createComponent(configComponentFactory);
+  }
+
+}