[Angular] 디렉티브

1. 디렉티브란

Angular 애플리케이션 안에 있는 엘리먼트에 어떤 동작을추가하는 클래스를 의미 한다.

 

2. 디렉티브의 종류

컴포넌트

템플릿이 존재하는 디렉티브이고 가장 많이 사용한다.

 

어트리뷰트 디렉티브 

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

 

RouterModule이나 RormsModule과 같이 어트리뷰트 디렉티브를 제공하는 NgModule이 많은데 그중에서 자주 사용하는 것은 3가지가 있습니다.

 

NgClass

CSS클래스 여러 개를 엘리먼트에 동시에 추가하거나 제거할 수 있습니다.

(클래스를 하나만 추가하거나 제거한다면 NgClass 보다 클래스 바인딩을 사용하는것이 더 좋습니다.)

NgClass에 메서드 사용하기

1.메서드를 컴포넌트 클래스에 정의하기

currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS 클래스는 컴포넌트 프로퍼티 값에 따라 추가되거나 제거됩니다.
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

2.템플릿에 엘리먼트의 ngClass를 바인딩하기

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

 

NgStyle

NgStyle을 활용하면 컴포넌트 상태에 따라 달라지는 여러 인라인 스타일을 동시에 지정할 수 있습니다.

1.컴포넌트 클래스에 메서드를 추가한다.

currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
  // CSS 스타일은 컴포넌트 프로퍼티 값에 따라 지정됩니다.
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

2.엘리먼트의 스타일 지정하기

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

ngOnInit()이 실행될 때 setCurrentStyles()가 처음 실행되며 버튼을 누를때마다 계속 실행 되고 

이렇게 구현했을 경우 Angular는 변화를 감지할 때마다 엘리먼트에 적용되는 스타일을 계산합니다.

 

NgModel

데이터 프로퍼티의 값을 화면에 표시할 수 있으며, 사용자가 값을 변경했을 때 클래스 프로퍼티에 반영할 수 있습니다.

 

1.NgModule imports 목록에 FormsModule을 불러와서 추가한다.

import { FormsModule } from '@angular/forms'; // <--- FormsModule 패키지 로드
/* . . . */
@NgModule({
  /* . . . */

  imports: [
    BrowserModule,
    FormsModule // <--- NgModule에 로드
  ],
  /* . . . */
})
export class AppModule { }

2.HTML <form>엘리먼트에 [(ngModel)]바인딩 문법을 추가하고 이 바인딩 오른쪽에 프로퍼티를 할당하기

<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">

(Angular 컴포넌트에는 값 접근자나 NgModel을 사용할 필요 없이 Angular가 제공하는 양방향 바인딩 문법을 활용하면 된다.)

 

구조 디렉티브

구조 디렉티브는 조건에 맞는 엘리먼트를 DOM 트리에 추가하거나, 제거, 조작하는 방식으로 DOM 구조를 변형합니다.

 

NgIf

조건에 따라 템플릿의 일부를 DOM 트리에 추가하거나 DOM 트리에서 제거합니다.

 

NgIf에 할당되는 값이 false 이면 Angular는 해당 엘리먼트를 자식 노드와 함께 DOM 트리에서 완전히 제거합니다. 그래서 메모리 사용량과 리소스 사용량을 줄일 수 있습니다.

 

엘리멘트를 DOM 트리에 추가하거나 제거하려면 *ngIF 디렉티브에 isActive와 같이 조건 표현식을 바인딩 하면 됩니다.

<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>

이렇게 했을경우 isActive표현식이 참임으로  NgIf가 itemDetailComponent를 DOM 트리에 추가합니다.

그리고 표현식에 거짓을 평가되는 값을 반환하면 NgIf가 itemDetailComponent를 DOM 트리에서 제거하고 해당 컴포넌트와 이 컴포넌트의 자식 컴포넌트를 모두 종료합니다.

 

null 값 방지하기

기본적으로 NgIf에 null 값이 바인딩되면 엘리먼트를 DOM트리에 추가하지 않습니다.

 

NgFor

배열에 있는 항목을 화면에 표시할 수 있습니다.

 

NgSwitch

여러 엘리먼트 중 조건에 맞는 엘리먼트 하나를 DOM트리에 추가하는 디렉티브입니다.

 

참고

https://angular.kr/guide/built-in-directives

Angular 가이드