Directive의 설명과 타입, Built-in attribute directive 중 NgClass 활용법

Directive? 

 

Angular 어플리케이션 안에 있는 엘리먼트에 어떤 동작을 추가하는 클래스

Angular는 폼, 목록, 스타일 등에 적용할 수 있는 기본 디렉티브를 다양하게 제공한다.

 

Angular Directive Type은 3가지로 구분할 수 있다.

• 컴포넌트(Component) - 템플릿이 존재하는 디렉티브이다. 가장 많이 사용되는 Type
• 어트리뷰트 디렉티브(Attribute directives) - 엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 Type
• 구조 디렉티브(Structural directives) - 조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 Type

---

Built-in attribute directives ( 기본 어트리뷰트 디렉티브 )

HTML 엘리먼트, 어트리뷰트, 프로퍼티, 컴포넌트의 동작을 변경한다.

 

자주 사용하는 어트리뷰트 디렉티브는 이런 것들이 있다.

• NgClass - CSS 클래스를 추가, 제거
• NgStyle - HTML 스타일 추가, 제거
• NgModel - HTML 폼 엘리먼트에 양방향 데이터 바인딩 연결

---

NgClass로 Class 추가 / 제거하기

ngClass를 사용하면, CSS 클래스 여러 개를 엘리먼트에 동시에 추가, 제거할 수 있다.

 

클래스를 하나만 추가, 제거한다면 클래스 바인딩을 사용하는 것이 더 좋다고 한다.

 

NgClass에 표현식 사용하기

 

엘리먼트에 스타일을 지정하듯이, 이 디렉티브에 표현식을 지정할 수 있다.

<!-- "special" 클래스는 프로퍼티 바인딩으로 켜고 끌 수 있습니다. -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>​

isSpecial이라는 Boolean 값이 true면 special,

false면 '' 빈 문자열이 Class로 지정될 것 이다.

 

NgClass를 메소드와 함께 사용하기

 

1. 메소드와 함께 사용하려면 NgClass 컴포넌트 클래스에 메소드를 추가한다.

// src/app/app.component.ts

currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

 

키에 할당된 값이 true이면 ngClass가 해당 키를 클래스로 추가하고, false면 해당 키를 클래스에서 제거한다.

 

Record Type은 <key, Type> 인 객체 타입이다. Index Signature로 객체를 접근했다면

currentClasses 는 다음과 같을 것이다.

currentClasses: {
    [className: string]: boolean;
  };

 

2. 템플릿 엘리먼트의 ngClass를 currentClasses 프로퍼티와 바인딩

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>

 

이렇게 구현하면 Angular는 변화를 감지할 때마다 엘리먼트에 적용되는 클래스를 계산한다. 그래서 ngOnInit()이 실행될 때 setCurrentClasses()가 처음 실행되며, 버튼을 클릭할 때마다 계속 실행된다. 이 동작은 ngClass가 유발하는 것이 아니다.

 

// app.component.ts
ngOnInit() {
 this.setCurrentClasses();
}

// app.component.html button에 이벤트 바인딩으로 setCurrentClasses 메소드 등록
<button (click)="setCurrentClasses()">Refresh currentClasses</button>