디렉티브 이해

https://poiemaweb.com/angular-component-built-in-directive

https://medium.com/sjk5766/ng-template%EA%B3%BC-ng-container-fb913ff1984d

---

디렉티브(Directive)는 DOM의 모든것을(모양과 동작) 관리하기 위한 지시(명령)다.

HTML요소노드에 어트리뷰트를 지정하는 형태로 사용하며 해당 요소노드는 디렉티브가 의미하는 명령대로 모양이 변경되거나 동작한다.

디렉티브를 만들어 보자

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appTextBlue]'
})
export class TextBlueDirective {
  constructor(el: ElementRef, renderer: Renderer2) { 
    renderer.setStyle(el.nativeElement, 'color', 'blue');
  }
}

HTML요소노드에 appTextBlue 어트리뷰트를 지정하면 해당 요소노드의 텍스트는 파란색으로 보이게 된다.

---

• 어트리뷰트 디렉티브
  ngClass, ngStyle는 요소노드의 모양을 변경한다.

• 구조디렉티브
  ngFor, ngIf, ngSwitch는 DOM의 구조를 변경한다.

ngIf

ngIf 디렉티브는 우변 표현식의 연산결과가 참이면 호스트요소를 DOM에 추가하고 거짓이면 호스트요소를 DOM에서 제거한다.

우변표현식은 반드시 true 또는 false로 평가될 수 있어야한다

<element *ngIf="expression">...</element>

*가 있는 위 문법은 간략화된 표현이다.

<ng-template [ngIf]="expression">
  <element>...</element>
</ng-template>

위 표현이 정식문법의 표현이며 이렇게 변환되어 처리된다.

호스트요소노드를 ng-template디렉티브로 래핑하며 ngIf프로퍼티바인딩한다.

---

ng-template디렉티브는 템플릿의 일부로서 정의되지만 단순히 정의된 상태에서는 주석처리되어 랜더링되지 않지만 ngIf바인딩된 표현식이 참으로 평가되면 DOM에 추가되고 랜더링된다.

---

<!-- ngIf에 의한 show/hide -->
<p *ngIf="isShow">Lorem ipsum dolor sit amet</p>

<!-- 스타일 바인딩에 의한 show/hide -->
<p [style.display]="isShow ? 'block' : 'none'">Lorem ipsum dolor sit amet</p>

스타일로 보이지않게 하는 것은 DOM에는 해당 요소노드가 남아있다.

<element *ngIf="expression; else elseBlock">Truthy condition</element>
<ng-template #elseBlock>Falsy condition</ng-template>

<!-- if else -->
<element *ngIf="expression; then thenBlock else elseBlock"></element>
<ng-template #thenBlock>Truthy condition</ng-template>
<ng-template #elseBlock>Falsy condition</ng-template>

<!-- if -->
<element *ngIf="expression; then thenBlock"></element>
<ng-template #thenBlock>Truthy condition</ng-template>

*ngIf=" ...; then ... else ...";와 템플릿변수를 사용할 수 있다.

---

ngFor

<element *ngFor="let item of items">...</element>

<element *ngFor="let item of items; let i=index; let odd=odd; trackBy: trackById">...</element>

<ng-template ngFor let-item [ngForOf]="items">
  <element>...</element>
</ng-template>

<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <element>...</element>
</ng-template>