[Angular] Overlay CDK

<!-- This button triggers the overlay and is it's origin -->
<button (click)="isOpen = !isOpen" type="button" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
  {{isOpen ? "Close" : "Open"}}
</button>

<!-- This template displays the overlay content and is connected to the button -->
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
  <ul class="example-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</ng-template>

[cdkConnectedOverlayPositions]="positions"

import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  ViewChild,
  ElementRef,
} from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';
import {
  CdkConnectedOverlay,
  ConnectedPosition,
  ScrollStrategyOptions,
  ScrollStrategy,
} from '@angular/cdk/overlay';
import { OverlayReference } from '@angular/cdk/overlay/overlay-reference';
...

@Component({
...
})
export class DropDownSearchComponent implements OnInit {

  positions: ConnectedPosition[] = [
    {
      originX: 'center',
      originY: 'bottom',
      overlayX: 'center',
      overlayY: 'top',
      offsetY: -21,
    },
    {
      originX: 'center',
      originY: 'top',
      overlayX: 'center',
      overlayY: 'bottom',
      panelClass: 'no-enogh-space-at-bottom',
    },
  ];

} 

import {
  ConnectedPosition,
  Overlay,
  OverlayPositionBuilder,
} from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
...
})
export class AppComponent implements OnInit {

  @ViewChild(DropDownSearchComponent, { read: ElementRef, static: true })
  dropdown;

createDialog() {
    const overlayRef = this.overly.create({
      hasBackdrop: true,
      positionStrategy: this.positionBuilder
        .global()
        .centerHorizontally()
        .centerVertically(),
      // .flexibleConnectedTo(this.dropdown)
      // .withPositions([
      //   {
      //     // here, top-left of the overlay is connected to bottom-left of the origin;
      //     // of course, you can change this object or generate it dynamically;
      //     // moreover, you can specify multiple objects in this array for CDK to find the most suitable option
      //     originX: 'center',
      //     originY: 'bottom',
      //     overlayX: 'center',
      //     overlayY: 'top',
      //   } as ConnectedPosition,
      // ])
      // .withPush(false),
    });
    const dialogPortal = new ComponentPortal(DialogComponent);
    overlayRef.attach(dialogPortal);
    overlayRef.backdropClick().subscribe(() => overlayRef.detach());
  }
}

[cdkConnectedOverlayScrollStrategy]="scrollStrategy"

import {
  CdkConnectedOverlay,
  ConnectedPosition,
  ScrollStrategyOptions,
  ScrollStrategy,
} from '@angular/cdk/overlay';

@Component({
...
})
export class DropDownSearchComponent implements OnInit {

  scrollStrategy: ScrollStrategy;

  constructor(
    private focusMonitor: FocusMonitor,
    private scrollStrategies: ScrollStrategyOptions
  ) {}

    // this.scrollStrategy = new ConfirmScrollStrategy(this.inputEl);
    // this.scrollStrategy = this.scrollStrategies.none()
    // this.scrollStrategy = this.scrollStrategies.block();
    // this.scrollStrategy = this.scrollStrategies.close({
    //   threshold: 50,
    // });
    this.scrollStrategy = this.scrollStrategies.reposition();
..
}

class ConfirmScrollStrategy implements ScrollStrategy {
  _overlay: OverlayReference;

  constructor(private inputRef: ElementRef) {}

  attach(overlayRef: OverlayReference) {
    this._overlay = overlayRef;
  }

  enable() {
    document.addEventListener('scroll', this.scrollListener);
  }

  disable() {
    document.removeEventListener('scroll', this.scrollListener);
  }

  private scrollListener = () => {
    if (confirm('The overlay will be closed. Procced?')) {
      this._overlay.detach();
      this.inputRef.nativeElement.blur();
      return;
    }
    this._overlay.updatePosition();
  };
}

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
..

  constructor(
    ..
    private breakpointObserver: BreakpointObserver
  ) {}

  ngOnInit(): void {
    if (this.breakpointObserver.isMatched('(max-width: 600px)')) {
      console.info('The screen width is less than 600px');
    }
    this.isWideScreen$ = this.breakpointObserver
      .observe([Breakpoints.HandsetLandscape])
      .pipe(map(({ matches }) => matches));
  }

import { FocusMonitor } from '@angular/cdk/a11y';

  constructor(
    private focusMonitor: FocusMonitor,

  ) {}

    this.isPanelVisible$ = this.focusMonitor.monitor(this.inputEl).pipe()

}

 @ViewChild(CdkConnectedOverlay, { static: true })
  private connectedOverlay: CdkConnectedOverlay;

 const onEscClick$ = this.connectedOverlay.overlayKeydown.pipe(
      filter(({ keyCode }) => {
        return keyCode === ESCAPE;
      })
    );

<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayHasBackdrop
  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
  [cdkConnectedOverlayOrigin]="originOverlay"
  [cdkConnectedOverlayOpen]="showPanel$ | async"
  [cdkConnectedOverlayPositions]="positions"
>