Angular: "track by" structural directive for single component/element

track-by.directive.ts

import {
  Directive,
  EmbeddedViewRef,
  Input,
  OnInit,
  TemplateRef,
  ViewContainerRef,
} from '@angular/core';

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Directive({
  selector: '[mfTrackBy]',
})
export class TrackByDirective implements OnInit {
  private value$ = new BehaviorSubject<any>(undefined);

  private viewRef: EmbeddedViewRef<any> | undefined;

  constructor(
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<any>,
  ) { }

  @Input()
  set mfTrackBy(value: any) {
    this.value$.next(value);
  }

  ngOnInit(): void {
    this.value$
      .distinctUntilChanged()
      .subscribe(() => {
        if (this.viewRef) {
          this.viewContainer.clear();
        }

        this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
      });
  }
}