[Angular] Directive 지시자 정리

Angular2 버전 이후를 기준으로 정리한 글입니다.

앵귤러에는 세가지 지시자(directive)가 있다.

컴포넌트 - 템플릿을 가지는 지시자

구조 지시자 - DOM 요소를 동적으로 추가하거나 제거하는 지시자

속성 지시자 - 요소, 컴포넌트, 다른 지시자의 행동이나 모양을 변경하는 지시자

구조 지시자 

: DOM 요소를 추가 하거나 제거하는 등 DOM의 레이아웃을 동적으로 변경할 때 사용하는 지시자이다.

구조 지시자에는 NgIf, NgSwitch, NgFor가 존재한다.

NgIf 지시자

: boolean 표현식을 가지며 값에 따라 DOM 요소가 나타나거나 사라진다.

<div *ngIf="hero" >{{hero.name}}</div>

위의 예에서 hero의 값이 존재하면 div 요소가 출력되고 값이 null 혹은 undefined라면 요소가 나타나지 않는다.

NgSwitch 지시자

: 조건에 따라 DOM의 요소를 추가하거나 제거하는 기능을 갖춘 지시자로 switch문을 이용하여 요소를 조작할 수 있다.

<div [ngSwitch]="product">
  <span *ngSwitchCase="'Computer'">computer</span>
  <span *ngSwitchCase="'TV'">tv</span>
  <span *ngSwitchCase="'Phone'">phone</span>
  <span *ngSwitchDefault>default</span>
</div> 

위의 예에서 ngSwitch의 product 값에 따라 span 태그의 computer, tv ,phone 요소가 나타나며 일반적인 프로그래밍 언어에서와 같이 어떤 조건에도 만족하지 않을 경우 ngSwitchDefault문을 이용하여 디폴트인 경우를 처리할 수 있다.

NgFor 지시자

: 배열 형태의 요소를 let {요소} of {배열} 형태의 문법을 이용하여 반복해서 나타나게 하고 싶을 경우 사용할 수 있다.

<div *ngFor="let hero of heroes; let i=index>
  ({{i}}) {{hero.name}}
</div>

위의 예에서는 ngFor 안에 heroes 배열에서 요소를 hero 변수에 할당하고 있으며 해당 인덱스는 i 변수에 저장하고 있다. 

heroes 배열의 사이즈 만큼 요소의 인덱스와 값을 출력하는 코드이다.

속성 지시자

:속성 지시자는 @directive 어노테이션이 붙은 컨트롤러 클래스를 만들어 작성하며 속성을 조작하는데 사용된다.

NgClass, NgStyle 지시자가 존재하며 각각 클래스나 스타일 요소를 동적으로 변경하는데 사용할 수 있다.