디렉티브

디렉티브는 엘리먼트의 모습이나 동작, DOM 안에서의 배치를 변경할 수 있습니다. Angular가 제공하는 내장 디렉티브를 사용하거나 직접 디렉티브를 작성할 수 있습니다.

디렉티브를 사용하는 경우

기존 엘리먼트나 컴포넌트에 적용할 재사용 가능한 동작을 캡슐화할 때 디렉티브가 가장 효과적입니다.

다음과 같은 경우에 주로 사용합니다.

• 자동 포커스나 툴팁처럼 여러 엘리먼트에 같은 모습이나 동작 적용하기
• 호스트 엘리먼트의 DOM, 어트리뷰트, 클래스 읽거나 변경하기
• 직접 관리하지 않는 컴포넌트의 소스 코드를 변경하지 않고 동작 추가하기

직접 마크업을 렌더링하거나 자체 템플릿이 있는 UI를 관리해야 한다면, 자체 템플릿을 가진 특별한 디렉티브인 컴포넌트를 사용하세요.

간단한 예제

사용자가 엘리먼트 위로 마우스를 가져가면 배경색을 노란색으로 바꿔서 강조하고 싶다고 가정해 보세요. 모든 엘리먼트에 같은 이벤트 처리 로직을 반복해서 작성하는 대신 디렉티브로 구성해서 필요한 곳에 적용할 수 있습니다.

다음 appHighlight 디렉티브는 마우스가 호스트 엘리먼트 안으로 들어오면 배경색을 설정하고, 밖으로 나가면 배경색을 지웁니다.

import {Directive, signal} from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'isHovered.set(true)',
    '(mouseleave)': 'isHovered.set(false)',
    '[style.background-color]': 'isHovered() ? "yellow" : null',
  },
})
export class HighlightDirective {
  protected isHovered = signal(false);
}

host 메타데이터는 마우스 이벤트를 감지해서 isHovered 시그널을 갱신하고, 호스트 엘리먼트의 background-color 스타일을 시그널 값에 바인딩합니다.

엘리먼트에 디렉티브 셀렉터를 어트리뷰트로 추가하면 디렉티브를 적용할 수 있습니다.

<p appHighlight>강조해 주세요!</p>

appHighlight 어트리뷰트가 있는 모든 엘리먼트에는 한 곳에 정의한 같은 호버 동작이 적용됩니다.

디렉티브 종류

Angular에는 세 가지 주요 디렉티브 종류가 있습니다.

다음 단계

다음 가이드에서 각 디렉티브 종류를 자세히 알아보세요.