Hibernate
Liquid
Karma
Deploy
SASS
REST
Upgrade
Boot
Spring
Consume
Visualize
React
Angular

$compile for the latest Angular version

At work, I was faced with the challenge of upgrading an AngularJS app with heavy use of $compile to the latest version of Angular which has no out of the box solution for compiling a template string that includes other components. So after much research I developed this component. Of course, I forked the main concept from another developer's sample posted overstack (https://stackoverflow.com/a/53739133) and I added the context input. It was hard to find on the internet, so I hope that others will benefit from this code. Enjoy.
https://mx-bind-html-compile.stackblitz.io

import {
  Component, ViewChild, OnDestroy,
  AfterContentInit, ComponentFactoryResolver,
  Input, Compiler, ViewContainerRef, NgModule,
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppModule } from './app.module';

@Component({
  selector: '[mxCompileHTML]',
  template: `<ng-template #dynamicComponent></ng-template>`
})
export class TemplateCompileComponent implements AfterContentInit, OnDestroy {
  @ViewChild('dynamicComponent', { read: ViewContainerRef }) _container: ViewContainerRef;
  @Input('mxCompileHTML') template: string
  @Input('mxCompileContext') context: string

  private cmpRef;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private compiler: Compiler,
    ) {}

  ngOnDestroy() {
    //Always destroy the dynamic component
    //when the parent component gets destroyed
    if (this.cmpRef) {
      this.cmpRef.destroy();
    }
  }

  ngAfterContentInit() {
    // this code replaces this from AngualJS ---             
    // element.replaceWith($compile(tplContent.trim())(scope))

    let context = this.context
    let template = this.template
    @Component({template: template})
    class DynamicComponent { constructor() { Object.assign(this, context) } }
    @NgModule({imports: [AppModule], declarations: [DynamicComponent]})
    class DynamicComponentModule { }
    const mod = this.compiler.compileModuleAndAllComponentsSync(DynamicComponentModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === DynamicComponent
    );
    const component = this._container.createComponent(factory);
  }
}