Angular Custom Structural Directive

Structural directives add or remove elements from the DOM. This example creates a *appDelayedHide directive.

// directives/delayed-hide.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appDelayedHide]',
  standalone: true,
})
export class DelayedHideDirective implements OnChanges {
  @Input() appDelayedHide: boolean = false;
  @Input() appDelayedHideDelay: number = 500;

  private timer: ReturnType<typeof setTimeout> | null = null;

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

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['appDelayedHide']) {
      clearTimeout(this.timer!);

      if (!this.appDelayedHide) {
        // Show immediately
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        // Hide after delay
        this.timer = setTimeout(() => {
          this.viewContainer.clear();
        }, this.appDelayedHideDelay);
      }
    }
  }
}

<!-- Usage -->
<div *appDelayedHide="isHidden" [appDelayedHideDelay]="800">
  This disappears with a delay!
</div>