Overlay Loading Directive > Directive

overlay-loading.directive.ts

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
import { OverlayRef } from '@angular/cdk/overlay';
import { DynamicOverlay } from '@app/third-parties/angular-material/dynamic-overlay';
import { Observable } from 'rxjs';
import { ComponentPortal } from '@angular/cdk/portal';
import { LoaderComponent } from './loader/loader.component';

@Directive({
  selector: '[overlayLoading]'
})
export class OverlayLoadingDirective implements OnInit {
  @Input('overlayLoading') toggler: Observable<boolean>;

  private overlayRef: OverlayRef;

  constructor(
    private host: ElementRef,
    private dynamicOverlay: DynamicOverlay
  ) {}

  ngOnInit() {
    this.overlayRef = this.dynamicOverlay.createWithDefaultConfig(
      this.host.nativeElement
    );

    this.toggler.subscribe(show => {
      if (show) {
        this.overlayRef.attach(new ComponentPortal(LoaderComponent));
      } else {
        this.overlayRef.detach();
      }
    });
  }
}