앵귤러 템플릿 - directives

디렉티브는 앵귤러 앱에 추가기능을 더해주는 기능을 합니다. 디렉티브는 크게 아래와 같이 나누어지는데요.

• 컴포넌트 (Components)
• 속성 (Attribute)
• 구조 (Structural)

속성 (Attribute) 디렉티브

스타일이나 기능추가 등에 사용되는 디렉티브입니다. 

1. ngClass

앵귤러 템플릿 - class binding & ngClass

요소에 클래스를 추가하거나 없애는 기능을 합니다.

<div [ngClass]="true ? 'class' : '' "></div>

2. ngStyle

앵귤러 템플릿 - style binding & ngStyle

요소에 스타일을 추가하거나 없애는 기능을 합니다.

<div [ngStyle]="{}"></div>

3. ngModel

앵귤러 directive - ngModel

데이터 속성을 추가하거나 갱신하는 기능을 합니다. 'FormModule'에 속한 디렉티브로 사용을 위해서는 'FormModule'을 모듈에 추가해야 합니다.

 

// app.module.ts

import { FormsModule } from '@angular/forms'; 
@NgModule({
  imports: [    
    FormsModule 
  ],  
})
export class AppModule { }

<!-- example.component.html -->

<input [(ngModel)]="title">
<p> {{title}} </p>

// example.component.ts

title:string = ''

구조 (Structural) 디렉티브

앞에 *이 붙는 디렉티브로 템플릿의 구조를 변경하며, 요소당 하나의 구조 디렉티브만 사용가능합니다.

1. ngIf

앵귤러 directives - ngIf

조건이 참일 때 요소를 표시합니다.

<div *ngIf="true"></div>

2. ngFor

앵귤러 directives - ngFor

주어진 크기만큼 반복하여 요소를 생성합니다.

<div *ngFor="let i of items"></div>

아래와 같이 인덱스를 추가하는 것도 가능합니다.

<div *ngFor="let i of items; let idx = index"></div>

3. ngSwitch

입력된 값과 동일한 값을 가지는 요소를 표시합니다.

<div [ngSwitch]="case">
  <div *ngSwitchCase="1"></div>
  <div *ngSwitchCase="2"></div>
  <div *ngSwitchCase="3"></div>
  <div *ngSwitchDefault></div>
</div>

---

참고

Angular