Directive는 DOM 요소의 모양이나 동작을 변경합니다.
앵귤라에는 세가지 종류의 디렉티브가 있다.
- Components - 템플릿이 있는 디렉티브
- 구조적 디렉티브 - DOM요소들을 추가, 제거 하여 DOM 레이아웃을 변경합니다.
- 속성 디렉티브 - 요소, 구성 요소 또는 다른 디렉티브의 모양 또는 동작을 변경합니다.
<p appHighlight>Highlight me!</p>
CLI명령을 사용해여 디렉티브 생성
ng generate directive highlight
디렉티브 정의는 앵귤라의 모듈 정의와 같게 정의 하면 된다.
hightlight.directive.ts
import { Directive } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor() { } }
Directive를 import하고 @Directive 데코레이터를 사용해서 정의한다.
디렉티브의 설정에 selector은 CSS 속성 선택자를 사용한다.
import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }
디렉티브의 생성자에 ElementRef 주입 하고, 네이티브요소 속성을 통해 DOM 요소에 직접 액세스 할수 있다.
@angular/core 에 HostListener를 import 해서 이벤트 응답을 추가할수 있다.
import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @HostListener('mouseenter') onMouseEnter() { this.highlight('yellow'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; }
@Input 데이터 바인딩을 이용하여 값을 디렉티브에 전달한다.
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @Input('appHighlight') highlightColor: string; //input 데이터 별칭을 사용한경우
//@Input highlightColor: string; //input 데이터 별칭을 사용 안한경우. @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor || 'red'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }
<p [appHighlight]="color">Highlight me!</p>