ngIf
어떤 요소를 일정 조건에 따라 표시하거나 숨길 때 사용한다. 조건은 디렉티브에 전달하는 수식의 결과에 따라 결정된다. 즉, 이 조건이 true면 해당 태그는 화면에 보여진다. false라면 화면에 보이지 않는다. 태그의 수식의 boolean 값에 맞춰서 DOM에서 삭제될지 유지될지 결정된다.
<div *ngIf='true'>보인다!</div>
<div *ngIf='false'>안보인다!</div>ngSwitch
경우에 따라서는 일정 조건에 따라 서로 다른 요소들을 렌더링해야 한다. ngIf를 반복해서 사용할 수 있지만, 보다 효율적인 코드를 위해서 ngSwitch를 사용하는 것이 좋다.
<div class='container' [ngSwitch]="name">
<div *ngSwitchCase='blo'>보인다!</div>
<div *ngSwitchCase='mike'>안보인다!</div>
<div *ngSwitchDefault>이름을 입력해주세요!</div>
</div>ngSwitch 디렉티브는 프로그래밍 언어의 switch문과 그 개념이 서로 같다. 어떤 수식을 판단하고, 그 결과를 바탕으로 중첩되는 요소를 표시한다. ngSwitchCase 디렉티브는 'name'에 바인딩된 데이터를 바탕으로 판단해서 해당 결과값의 태그를 렌더링한다. ngSwitchDefault 디렉티브는 'name' 데이터에 해당하는 값이 없을 때 렌더링된다.
즉, 'name'변수에 할당된 값이 지정된 태그가 렌더링되고 값 자체를 찾을 수 없을때 디폴트로 ngSwitchDefault 디렉티브에 해당하는 태그가 렌더링된다.ngSwitchDefault 디렉티브를 사용하지 않아도 된다. 사용하지 않았을 경우 원하는 값이 없다면 아무것도 렌더링되지않는다.
NgStyle
DOM 요소의 CSS 프로퍼티를 앵귤러 수식에서 설정할 수 있다. ngStyle의 가장 단순한 구조는 아래 코드와 같다.
<div [style.background-color]="'red'">
~~~~
</div>여기서 NgStyle 지시자를 사용하면 아래 코드와 같다.
<div [ngStyle]="{'background-color':'blue'}">
~~~~
</div>NgClass
HTML 템플릿에서 ngClass는 DOM 요소에 따라 CSS 클래스를 동적으로 설정하고 변경할 때 사용된다. 우선 NgClass 지시자는 객체 리터럴을 전달할 때 사용한다. 이 객체는 클래스 이름에 해당하는 키를 가지고 있어야 하며, boolean 값에 따라 클래스의 적용 여부가 결정된다.
<div [ngClass]="{redFont: false}"> this is never red color font!</div>
<div [ngClass]="{redFont: true}"> this is red color font!</div>NgFor
DOM Element를 반복해서 렌더링 시킬 때 사용하는 디렉티브이다.
<div *ngFor = "let item of items"></div>items 배열에서 요소의 개수만큼 해당 element가 DOM에서 렌더링된다.
예를들어, 상품리스트에서 상품 컴포넌트들을 반복해서 구현할 때 사용하면 좋다.
하나의 컴포넌트를 생산하고 컴포넌트 내 데이터들만 수정해서 DOM에 구현할 수 있다.
