Structural directives - Let directive

let.directive.ts

/**
 * This interface represents context of the directive.
 *
 * It defines two properties ($implicit and appLet) which enables same behavior with different syntax.
 * It is not required to have both, it is just a way to provide support for both syntax.
 */
interface LetContext<T> {
  /**
   * Current item exposed in implicit value variable.
   * This enables us to use the let syntax
   *
   * @example
   * <ng-container *appLet="data$ | async; let data">
   *   Data: {{data}}
   * </ng-container>
   */
  $implicit?: T;  // current item exposed as implicit value
  /**
   * Current item exposed as key matching the directive name.
   * This adds support for `as` syntax in template.
   *
   * @example
   * <ng-container *appLet="data$ | async as data">
   *   Data: {{data}}
   * </ng-container>
   */
  appLet?: T;
}

@Directive({
  selector: '[appLet]'
})
export class LetDirective<T> {

  private context: LetContext<T> = {
    $implicit: undefined,
    appLet: undefined
  };

  constructor(private readonly viewRef: ViewContainerRef,
              private readonly templateRef: TemplateRef<LetContext<T>>) {
    this.viewRef.createEmbeddedView(this.templateRef, this.context);
  }

  @Input()
  set appLet(value: T) {
    this.context.appLet = this.context.$implicit = value;
  }
}

usage-example.html

<ng-container *appLet="data$ | async as data;"> <!-- single subscription -->
  <div>
    Data: {{data}} <!-- false -->
  </div>
</ng-container>
<ng-container *appLet="data$ | async; let data2"> <!-- single subscription -->
  <div>
    Data2: {{data2}} <!-- same value as Data (false) -->
  </div>
</ng-container>

https://itnext.io/angular-structural-directives-b54ea21b39a7