Что такое Angular CDK и его основные компоненты?angular-76

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

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

  1. Абстракция сложных паттернов без навязывания стилей
  2. Доступность (a11y) из коробки
  3. Адаптивность под разные устройства
  4. Производительность оптимизированных решений

Ключевые компоненты CDK

1. Overlay

Создание всплывающих элементов (модалки, попапы, меню):

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [OverlayModule]
})
export class AppModule {}

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

constructor(private overlay: Overlay) {}

openPopup() {
  const overlayRef = this.overlay.create({
    positionStrategy: this.overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically(),
    hasBackdrop: true
  });

  overlayRef.attach(new ComponentPortal(MyPopupComponent));
}

2. Portal

Динамическое отображение контента в DOM:

import { ComponentPortal } from '@angular/cdk/portal';

// Создание портала
const portal = new ComponentPortal(MyDynamicComponent);

// Прикрепление к точке в DOM
portalOutlet.attach(portal);

3. Drag and Drop

Реализация перетаскивания элементов:

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [DragDropModule]
})
export class AppModule {}

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

<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items" cdkDrag>{{item}}</div>
</div>

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

4. Virtual Scrolling

Оптимизация рендеринга больших списков:

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ScrollingModule]
})
export class AppModule {}

Пример:

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items">{{item}}</div>
</cdk-virtual-scroll-viewport>

5. Clipboard

Работа с буфером обмена:

import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
  imports: [ClipboardModule]
})
export class AppModule {}

Пример:

<button [cdkCopyToClipboard]="textToCopy">Копировать</button>

6. Accessibility

Инструменты для доступности:

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

@NgModule({
  imports: [A11yModule]
})
export class AppModule {}

Примеры:

  • cdkTrapFocus - ловушка фокуса для модалок
  • cdkMonitorSubtreeFocus - отслеживание фокуса

7. Layout

Реактивные инструменты для работы с макетом:

import { LayoutModule } from '@angular/cdk/layout';

@NgModule({
  imports: [LayoutModule]
})
export class AppModule {}

Пример:

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

constructor(private breakpointObserver: BreakpointObserver) {
  breakpointObserver.observe([
    Breakpoints.Handset
  ]).subscribe(result => {
    this.isMobile = result.matches;
  });
}

8. TextField

Улучшения для текстовых полей:

import { TextFieldModule } from '@angular/cdk/text-field';

@NgModule({
  imports: [TextFieldModule]
})
export class AppModule {}

Пример:

<textarea cdkTextareaAutosize></textarea>

9. Stepper

import { CdkStepperModule } from '@angular/cdk/stepper';

@NgModule({
  imports: [CdkStepperModule]
})
export class AppModule {}

Пример:

<div cdkStepper>
  <div cdkStep *ngFor="let step of steps">
    {{step}}
  </div>
</div>

10. Table

import { CdkTableModule } from '@angular/cdk/table';

@NgModule({
  imports: [CdkTableModule]
})
export class AppModule {}

Пример:

<table cdk-table [dataSource]="dataSource">
  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef>Name</th>
    <td cdk-cell *cdkCellDef="let row">{{row.name}}</td>
  </ng-container>
</table>

Преимущества использования CDK

  1. Экономия времени - не нужно реализовывать сложные паттерны с нуля
  2. Стандартизация - единый подход для всей команды
  3. Доступность - встроенная поддержка a11y
  4. Гибкость - можно комбинировать с любыми UI-библиотеками
  5. Производительность - оптимизированные решения

Когда использовать CDK

  1. При создании кастомных UI-компонентов
  2. Для реализации сложных интерактивных элементов
  3. Когда нужна доступность "из коробки"
  4. Для оптимизации производительности
  5. При создании собственной UI-библиотеки

Резюмируем

Angular CDK предоставляет мощный набор инструментов для создания кастомных, доступных и производительных компонентов. Он дает разработчикам строительные блоки для реализации сложных UI-паттернов без привязки к конкретному дизайну, что делает его незаменимым инструментом для профессиональной Angular-разработки.

Вопросы

Собеседования