Angular Directive (미완)

# Directive란?

- 번역하면, 지시자를 의미

- HTML에 Angular가 간섭할 부분을 표시하는 요소

- Component 또한 Template(html)이 포함된 Directive라고 할 수 있음

ex. <app-root></app-root> //<app-root>부분에 app-component 템플릿을 표출해달라는 의미

 

# Directive의 종류

- Structural Directive : DOM을 추가하거나 제거

ex. *ngIf, *ngFor //* 기호가 structural directive라는 것을 의미

<span *ngif="buget!==""">&#8361;</span>

- Attribute Directive : 이미 있는 DOM에 스타일이나 동작을 부여

ex. ngStyle, ngClass

 

@Directive({ selector: '[ngStyle]' }) class NgStyle implements DoCheck { set ngStyle: {...} ngDoCheck() }

//component처럼 Selector 요소 존재

//selector에 []기호를 씌움으로써, DOM의 속성 역할을 할 수 있게 함

<h3 [ngStyle]="{ 'color':budget<=1000?'red':'black', 'background-color':budget<=1000?'yellow':'transparent'}">

My Budget: &#8361;{{budget}}</h3>

# 출처

- https://dschci.tistory.com/88 [IT 회사에서 즐겁게 지내기!]