Custom template outlet to avoid view recreation on context changes

imbaTemplateOutlet.ts

interface Context {
  $implicit: any
}

@Directive({
  selector: '[imbaTemplateOutlet]'
})
export class ImbaTemplateOutlet {

  @Input()
  imbaTemplateOutlet: TemplateRef<Context>;

  @Input()
  private contextItem: any;

  viewRef: EmbeddedViewRef<Context> | null = null;

  constructor(private viewContainer: ViewContainerRef) {}

  ngOnChanges(changes: SimpleChanges) {
    if ('imbaTemplateOutlet' in changes) {
      if (this.viewRef === null)
        this.viewContainer.remove(this.viewContainer.indexOf(this.viewRef));

      this.viewRef = this.imbaTemplateOutlet ?
        this.viewContainer.createEmbeddedView(this.imbaTemplateOutlet, {$implicit: this.contextItem}) : 
	null;
    }
    else if ('contextItem' in changes && this.viewRef)
      this.viewRef.context.$implicit = this.contextItem;
  }
}