[typescript] Angular 디렉티브
Angular 애플리케이션을 작성할 때 디렉티브는 매우 중요한 구성 요소 중 하나입니다. 디렉티브는 HTML 요소를 확장하고, 속성을 정의하며, 동작을 변경합니다. Angular에서는 세 가지 유형의 디렉티브가 있습니다.
- 컴포넌트 디렉티브 - 가장 기본적인 디렉티브로, 템플릿과 동작을 가지는 디렉티브입니다.
- 구조 디렉티브 - DOM의 구조를 변경하거나 요소를 반복하는 디렉티브입니다.
- 속성 디렉티브 - HTML 요소의 외관이나 동작을 기반으로 다른 디렉티브와 함께 사용됩니다.
커스텀 디렉티브 작성하기
다음은 간단한 Angular 커스텀 속성 디렉티브의 예시입니다. 이 디렉티브는 마우스 오버 시 특정 스타일을 적용합니다.
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input() highlightColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || 'yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
커스텀 디렉티브 사용하기
커스텀 디렉티브를 사용하려면 해당 디렉티브를 선언해야 합니다. 이때, declarations 배열 또는 imports 배열에 디렉티브를 추가해야 합니다.
import { HighlightDirective } from './highlight.directive';
@NgModule({
declarations: [
HighlightDirective
],
// ...
})
export class AppModule { }
그런 다음 HTML 템플릿에서 해당 디렉티브를 사용할 수 있습니다.
<p appHighlight highlightColor="lightblue">
마우스를 올리면 강조됩니다.
</p>
이제 Angular 디렉티브를 작성하고 사용하는 방법에 대해 간략히 알아보았습니다. 디렉티브는 Angular 애플리케이션에서 강력하고 유연한 동작을 제공하는 데 중요한 역할을 합니다.