Существует ли модуль для создания перемещаемых окон поверх сайта на Angular 2+?

Да, существуют модули для создания перемещаемых окон поверх сайта на Angular 2+.

Один из таких модулей - Angular CDK (Component Dev Kit). Angular CDK предоставляет набор инструментов и компонентов для разработки переиспользуемых и доступных пользовательских интерфейсов.

Для создания перемещаемых окон на Angular 2+ с использованием Angular CDK, вам потребуется использовать его компонент CDK Overlay. Overlay позволяет создавать плавающие оверлеи над вашим приложением, включая перемещаемые окна.

Вот базовый пример того, как создать перемещаемое окно с помощью Angular CDK:

1. Установите Angular CDK с помощью следующей команды:

npm install @angular/cdk

2. Импортируйте необходимые модули в вашем Angular-компоненте:

import { Component, OnInit } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortalDirective } from '@angular/cdk/portal';

3. Создайте компонент, который будет являться содержимым перемещаемого окна:

<ng-template #windowContent>
  <h2>Перемещаемое окно</h2>
  <p>Привет, я перемещаемое окно!</p>
</ng-template>

4. Определите перемещаемое окно в вашем компоненте и прикрепите его к overlay:

@Component({
  selector: 'app-movable-window',
  templateUrl: './movable-window.component.html',
  styleUrls: ['./movable-window.component.css']
})
export class MovableWindowComponent implements OnInit {
  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay) { }

  ngOnInit() {
    this.overlayRef = this.overlay.create({
      hasBackdrop: true,
      panelClass: 'movable-window-panel',
      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
    });
  }

  openWindow() {
    const templatePortal = new TemplatePortalDirective(this.windowContent, null, {});

    this.overlayRef.attach(templatePortal);
  }

  closeWindow() {
    this.overlayRef.detach();
  }
}

5. Создайте стили для перемещаемого окна в вашем компоненте:

.movable-window-panel {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

Вот пример использования созданного перемещаемого окна в другом компоненте:

<button (click)="openWindow()">Открыть перемещаемое окно</button>

<app-movable-window></app-movable-window>

import { Component } from '@angular/core';
import { MovableWindowComponent } from './movable-window.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private movableWindow: MovableWindowComponent) {}

  openWindow() {
    this.movableWindow.openWindow();
  }
}

Теперь, когда вы нажимаете на кнопку "Открыть перемещаемое окно", перемещаемое окно появляется на экране и может быть перемещено по вашему усмотрению.