Prevent Clarity Angular dropdown clipping - Directive that prevents clipping of Clarity dropdowns (maybe also popovers etc. - not tested) when they are inside * containers that hide overflow. The trick is to just detach the element and attach it to the body.

anti-clipping.directive.ts

/**
 * Directive that prevents clipping of Clarity dropdowns (maybe also popovers etc. - not tested) when they are inside
 * containers that hide overflow. The trick is to just detach the element and attach it to the body.
 * Use it like this on the element that is clipping:
 *
 * ```
 * <clr-dropdown-menu clrPosition="bottom-left" appAntiClipping>
 * ```
 */
@Directive({
  selector: '[appAntiClipping]'
})
export class AntiClippingDirective implements OnInit {

  constructor(private el: ElementRef,
              @Inject(DOCUMENT) private document: Document) {
  }

  /**
   * De- and attaches the element to prevent clipping issues.
   */
  ngOnInit() {
    this.el.nativeElement.parentNode.removeChild(this.el.nativeElement);
    this.document.body.appendChild(this.el.nativeElement);
    this.el.nativeElement.style.visibility = 'visible';
  }

}