Search results for '앵귤러 디렉티브'

Angular Directive (Structural Directive)

2018. 2. 12. 23:27

이번에는 Angular의 두 번째 Directive를 보겠습니다.


Attribute Directive는 DOM에 스타일과 동작을 부여했죠?

Structural Directive는 DOM 자체를 추가 제거합니다.


짧은 설명으로는 이해가 어려우니 예제를 살펴보겠습니다.

ngIf 라는 Directive를 사용해볼게요.

ngIf 를 이용하면 조건에 따라 DOM을 추가/제거할 수 있습니다.


<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: 
      <span *ngif="buget!==""">&#8361;</span>{{budget}}</h3>


'원'표시를 span 태그로 감싸주었습니다.

그리고 *ngIf 라는 directive를 안에 넣어주었죠.

그 안에는 조건문이 들어갑니다.

조건을 만족시키면 span을 보여주고, 아니면 제거하는 겁니다.

budget 값이 빈문자열이라면 가격표시가 사라집니다.


재미난 것은 span 태그가 숨겨지는게 아니라 실제로 사라집니다.

크롬의 개발자 도구에서 보면 정확히 보이는데요.


ngIf를 활용한 DOM의 생성과 삭제


위와 같이 필요에 따라 DOM의 생성, 제거를 제어할 수 있습니다.

Structural Directive의 활용은 다양할 수 있겠죠?

Validation Message를 띄워준다든지 하는 것들이요.


참고로 ngIf 앞의 *표시는 Structural Directive임을 나타내는 syntax 입니다.

대표적으로 *ngFor라는 녀석도 있습니다.

다음에 필요시 사용해보도록 할게요.


소스주소: https://github.com/jsrho1023/account-book


'IT Tech > Angular' 카테고리의 다른 글

Angular Material Icon  (0) 2018.03.18
Angular Material Header Toolbar  (0) 2018.03.11
Angular Directive (Attribute Directive)  (2) 2018.02.04
Angular Material 디자인  (0) 2018.01.27
Angular 데이터 바인딩 III (ngModel)  (0) 2018.01.21

TechTrip IT Tech/Angular

Angular Directive (Attribute Directive)

2018. 2. 4. 20:31

알게 모르게 계속 사용했던 Directive에 대해서 살펴보겠습니다.

Directive를 번역하자면 지시자 라고 할 수 있겠네요.

HTML에 Angular가 간섭할 부분을 표시한다라고 이해하면 쉽습니다.

Component 역시 template이 포함된 Directive로 정의하는데요.

<app-root> 기억하시죠?

이 부분에 app-component를 표출해달라는 표시였습니다.


Component는 별도로 치고, Directive에 2가지가 더 있습니다.

Structural Directive와 Attribute Directive입니다.


2가지 Directives의 차이는 DOM을 다루는 방식입니다.

Structural Directive는 DOM을 추가하거나 제거합니다.

Attribute Directive는 이미 있는 DOM에 스타일이나 동작을 부여합니다.

Angular가 간섭해야함을 표시한다는 걸 기억해주세요.


오늘은 먼저 Attribute Directive를 살펴볼게요.

Angular의 Directive는 마치 HTML에 존재하는 속성처럼 사용됩니다.

스스로 custom directive를 정의할 수도 있습니다.

하지만 이미 만들어진 ngStyle을 보며 directive를 이해해보죠.


<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: &#8361;{{budget}}</h3>


h3 태그에 ngStyle Directive를 추가하였습니다.

마치 html 속성에 property binding을 한 모양새죠.

ngStyle의 값으로 css와 같이 key, value 쌍을 넣었습니다.

그리고 조건문도 들어갔죠.

budget 값이 1000이하면 노란배경에 빨간글씨가 됩니다.


ngStyle 적용 화면



ngStyle이라는 건 원래 html에 정의되어있지 않습니다.

즉 태그에 ngStyle이라고 표시되면 Angular가 간섭을 한다는 의미죠.

ngStyle의 실제 코드를 대략 살펴보면 아래와 같습니다.


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


마치 Component에서처럼 selector가 존재하죠.

Anguar는 저 selector를 찾아서 HTML에 스타일을 입히는 겁니다.

ngStyle 뿐 아니라 ngClass와 같이 정의된 directive가 더 있습니다.

기회가 되면 차차 사용하면서 배우구요.

다음에는 Structural Directive를 사용해보면서 익혀보겠습니다. 


소스주소: https://github.com/jsrho1023/account-book

TechTrip IT Tech/Angular