Angular CDK(Components Dev Kit)는 Angular 애플리케이션을 개발할 때 사용할 수 있는 재사용 가능한 컴포넌트와 도구 모음입니다. CDK는 공통된 작업을 처리하고 일관된 사용자 경험을 제공하기 위한 기능을 제공합니다. CDK는 웹 애플리케이션에서 반복되는 코드 작성을 줄이고 생산성을 향상시키는 데 도움이 됩니다.
Angular CDK의 주요 기능과 사용법을 설명해드리겠습니다.
- Portal: Portal은 컴포넌트를 동적으로 생성하고 다른 부모 컨테이너에 삽입하는 기능을 제공합니다. 이를 통해 다이얼로그, 툴팁, 팝오버 등 유연한 UI 요소를 구현할 수 있습니다.
예시 코드:
import { ComponentPortal } from '@angular/cdk/portal';
import { ComponentRef, PortalInjector } from '@angular/core';
@Component({
selector: 'app-example',
template: `
<ng-template #templateRef></ng-template>
`
})
export class ExampleComponent {
@ViewChild('templateRef', { static: true }) templateRef: TemplateRef<any>;
private portal: ComponentPortal<MyComponent>;
private componentRef: ComponentRef<MyComponent>;
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private injector: Injector
) {}
createComponent() {
this.portal = new ComponentPortal(MyComponent, null, this.createInjector());
this.componentRef = this.portal.attach(this.templateRef);
}
createInjector(): PortalInjector {
const injectionTokens = new WeakMap<any, any>([[SomeDependency, new SomeDependency()]]);
return new PortalInjector(this.injector, injectionTokens);
}
}위의 예시 코드에서 Portal을 사용하여 MyComponent를 동적으로 생성하고, TemplateRef에 삽입합니다. PortalInjector를 사용하여 의존성 주입을 처리할 수 있습니다.
- Overlay: Overlay는 다이얼로그, 팝오버, 툴팁 등을 구현하는 데 사용되는 컴포넌트를 렌더링하기 위한 가상 뷰 컨테이너를 생성하는 기능을 제공합니다. Overlay를 사용하면 화면 위치, 크기, 애니메이션 등을 관리할 수 있습니다.
예시 코드:
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
@Component({
selector: 'app-example',
template: `
<button (click)="openOverlay()">Open Overlay</button>
<ng-template #overlayTemplate>
<p>Content of the overlay</p>
</ng-template>
`
})
export class ExampleComponent {
@ViewChild('overlayTemplate', { static: true }) overlayTemplate: TemplateRef<any>;
private overlayRef: OverlayRef;
constructor(private overlay: Overlay) {}
openOverlay() {
this.overlayRef = this.overlay.create();
const positionStrategy = this.overlay.position()
.global()
.centerHorizontally()
.centerVert
ically();
this.overlayRef.attach(this.overlayTemplate);
}
closeOverlay() {
this.overlayRef.detach();
this.overlayRef.dispose();
}
}위의 예시 코드에서 Overlay를 사용하여 오버레이를 생성하고, positionStrategy를 사용하여 오버레이를 화면 가운데에 위치시킵니다. attach 메서드를 사용하여 오버레이에 overlayTemplate를 연결하고, detach 및 dispose 메서드를 사용하여 오버레이를 닫을 수 있습니다.
- Drag and Drop: CDK의 Drag and Drop 모듈은 사용자가 요소를 드래그하여 다른 위치로 이동하거나 재정렬할 수 있는 드래그 앤 드롭 기능을 제공합니다.
예시 코드:
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-example',
template: `
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of items" cdkDrag>{{item}}</div>
</div>
`
})
export class ExampleComponent {
items = ['Item 1', 'Item 2', 'Item 3'];
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}위의 예시 코드에서 cdkDrag 지시자를 사용하여 요소를 드래그 가능하게 만들고, cdkDropList 지시자를 사용하여 드롭 영역을 정의합니다. cdkDropListDropped 이벤트를 사용하여 요소가 드롭될 때 호출되는 drop 메서드에서 moveItemInArray 함수를 사용하여 배열 내 요소를 이동합니다.
Angular CDK는 위에 언급된 기능 외에도 다양한 도구와 컴포넌트를 제공합니다. CDK는 Angular Material 라이브러리의 기반이 되며, Angular 애플리케이션에서 재사용 가능하고 일관된 UX를 구현하는 데 도움이 됩니다.
아래의 예시 코드는 Angular CDK의 Overlay를 사용하여 화면 위치, 크기, 애니메이션을 관리하는 방법을 보여줍니다.
import { Component, TemplateRef, ViewChild } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
@Component({
selector: 'app-example',
template: `
<button (click)="openOverlay()">Open Overlay</button>
<ng-template #overlayTemplate>
<div class="overlay-container" [cdkOverlayOrigin]="trigger"> <!-- 트리거 엘리먼트와 연결 -->
<div class="overlay-content">
<p>Content of the overlay</p>
<button (click)="closeOverlay()">Close</button>
</div>
</div>
</ng-template>
`,
styles: [`
.overlay-container {
position: absolute;
background-color: white;
border: 1px solid black;
padding: 20px;
}
.overlay-content {
display: flex;
flex-direction: column;
}
`]
})
export class ExampleComponent {
@ViewChild('overlayTemplate', { static: true }) overlayTemplate: TemplateRef<any>;
private overlayRef: OverlayRef;
private portal: TemplatePortal;
constructor(private overlay: Overlay) {}
openOverlay() {
const positionStrategy = this.overlay.position()
.global()
.centerHorizontally()
.centerVertically();
const overlayConfig = {
positionStrategy,
hasBackdrop: true,
backdropClass: 'overlay-backdrop',
panelClass: 'overlay-panel',
scrollStrategy: this.overlay.scrollStrategies.block(),
width: '300px',
height: '200px',
maxHeight: '80vh',
maxWidth: '80vw',
disposeOnNavigation: true,
animation: this.overlay
.position()
.global()
.centerHorizontally()
.centerVertically()
.withLockedPosition()
.withAnimatedTransform()
.withAnimation(this.overlay.position().global().fadeIn())
};
this.overlayRef = this.overlay.create(overlayConfig);
this.portal = new TemplatePortal(this.overlayTemplate, null, {
$implicit: this.overlayRef
});
this.overlayRef.attach(this.portal);
}
closeOverlay() {
this.overlayRef.detach();
this.overlayRef.dispose();
}
}위의 코드에서는 Overlay와 TemplatePortal을 사용하여 오버레이를 생성하고 관리합니다. overlayTemplate에는 오버레이의 컨텐츠가 포함되어 있습니다. openOverlay 함수에서는 OverlayConfig를 설정하여 오버레이의 위치, 크기, 애니메이션 등을 구성합니다.
positionStrategy: 오버레이의 위치를 설정하는 전략으로, 가운데 정렬을 사용하도록 설정되어 있습니다.hasBackdrop: 배경 뒷면에 불투명한 배경을 생성합니다.backdropClass: 배경 요소에 적용할 CSS 클래스를 설정합니다.panelClass: 오버레이 패널 요소에 적용할 CSS 클래스를 설정합니다.scrollStrategy: 오버레이의 스크
롤 동작을 설정합니다.
width,height: 오버레이의 너비와 높이를 설정합니다.maxHeight,maxWidth: 오버레이의 최대 높이와 너비를 설정합니다.disposeOnNavigation: 오버레이가 내비게이션 변경 시 자동으로 삭제되도록 설정합니다.animation: 오버레이의 애니메이션 설정입니다. 이 예시에서는fadeIn애니메이션을 사용하고 있습니다.
overlayRef.attach(this.portal)를 사용하여 오버레이에 portal을 연결합니다. closeOverlay 함수에서는 오버레이를 닫고 삭제합니다.
위의 예시 코드를 실행하면 "Open Overlay" 버튼을 클릭할 때 오버레이가 화면 중앙에 나타나며, 오버레이 내의 "Close" 버튼을 클릭하면 오버레이가 닫힙니다. 오버레이의 위치, 크기, 애니메이션 등은 OverlayConfig를 수정하여 원하는 대로 구성할 수 있습니다.
