Использовали ли вы Angular CDK? Что это такое и для чего используется?

Что такое Angular CDK?

Angular CDK (Component Dev Kit) — это библиотека от команды Angular, которая содержит набор примитивов для построения собственных UI-компонентов. В отличие от Angular Material, CDK не навязывает визуальный стиль — он решает только поведенческие и структурные задачи. Это позволяет создавать уникальные интерфейсы, не изобретая велосипеды для типовых проблем.

Основные возможности

• Overlay — управление всплывающими окнами, тултипами, модалками с учётом позиционирования и z-index.
• A11y — утилиты для доступности: фокус-менеджмент, live-регионы, поддержка клавиатуры.
• Virtual scrolling — рендер только видимой части больших списков.
• Drag and drop — перетаскивание элементов с поддержкой анимаций и сортировки.
• Clipboard — работа с буфером обмена.
• Layout — утилиты для адаптивной вёрстки (BreakpointObserver).

Пример использования Overlay

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

@Component({...})
export class ExampleComponent {
  private overlayRef?: OverlayRef;

  constructor(private overlay: Overlay) {}

  openMenu() {
    const positionStrategy = this.overlay.position()
      .global().centerHorizontally().centerVertically();
    this.overlayRef = this.overlay.create({ positionStrategy });
    this.overlayRef.attach(new ComponentPortal(MenuComponent));
  }

  closeMenu() {
    this.overlayRef?.dispose();
  }
}

Здесь мы создаём оверлей по центру экрана и подключаем к нему компонент меню. CDK берёт на себя управление DOM и стилями позиционирования.

Где применяется

CDK используется в Angular Material, но также подходит для любых проектов на Angular, где нужны сложные интерактивные элементы: кастомные селекты, датапикеры, drag-and-drop списки, виртуальные таблицы. Он особенно полезен, когда требуется обеспечить доступность (a11y) без ручной реализации всех ARIA-атрибутов.

Вывод: Angular CDK — это фундамент для создания качественных компонентов. Если вы разрабатываете библиотеку UI или сталкиваетесь с задачами оверлеев, виртуализации или drag-and-drop, CDK сэкономит время и повысит надёжность кода.