Angular 2 지시자의 종류

안녕하세요.

오늘은 Angular 2에 지시자에 대해서 아주 간단하게 알아보도록 하겠습니다.

Angular 지시자의 종류

• Components Directives (컴포넌트 지시자)
• Structural Directives (구조 지시자)
• Attribute Directives  (속성 지시자)
• Custom Directives (커스텀 지시자)

Components Directives (컴포넌트 지시자)

• 여러 화면에서 공통적으로 사용되는 화면을 A컴포넌트로 만들어 놨다고 가정했을때, A컴포넌트의 selector 속성을 이용하여 컴포넌트 지시자로 사용합니다.
• home 컴포넌트에서 child-home 컴포넌트를 사용하는 예제입니다.
  

Structural Directives (구조 지시자)

• 구조적 지시자는 컴포넌트나 DOM을 추가/삭제하여 어떻게 화면에 나타내는지를 표현합니다. 
• 실제 DOM트리 자체에 직접 연관이 있습니다.
• Angular에서 제공하는 내장 지사자이고, ng 접두어가 붙어 있습니다.
• 대표적으로, ngIf, ngSwitch, ngFor 등이 있습니다.
• ex. <div *ngIf = "variable">

Attribute Directives  (속성 지시자)

• 속성 지시자는 DOM의 외형이나 동작을 변경한다.
• 엘리먼트 내에 []를 사용하여 표시하고, ng 접두어가 붙어 있습니다.
• 대표적으로, ngClass, ngStyle 등이 있습니다.
• ex. <div [ngClass] = "variable"> ... </div> 

Custom Directives (커스텀 지시자)

• 지시자를 추가할 때 지시자의 이름을 원하는 대로 지정할 수 있습니다.
• 다른 구성요소와 구분하기 위해서 "파일명.directive.ts" 의 형태로 파일을 추가합니다.
• @Directive 장식자를 사용하고, selector 속성에 지시자 이름을 설정합니다.
  
  - example. 커스텀 지시자를 생성합니다.
  
  - app.module에 등록합니다.
  
  
  - 커스텀 지시자를 사용합니다.
  

모두 즐거운 코딩하세요~