[Angular/앵귤러] ngClass 란? ngClass 디렉티브사용법

안녕하세요 질서 정연 입니다. 👽

오늘은 ngClass에 대해서 예제를 함께 보며 알아볼게요 

 

ngClass

---

ngClass를 이용하면 HTM element에 CSS class를 지워줄 수도 있고 더해 줄 수도 있답니다.

 

 

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

 

HTML 태그 안에 [ngClass] ="" 를 넣어 사용 합니다. 

 

String 을 넣어주는 경우

맨 첫 줄 예제부터 볼게요! 

 

<some-element [ngClass]="'first second'">...</some-element>

 

이렇게 string 을 넣어주면 some-element 태그에 first, second 클래스가 추가 됩니다.

제가 만약 CSS에서 first, second라는 이름으로 어떤 스타일을 넣어줬다면 some-element에 

first, second 클래스가 추가 되면서 그 스타일이 적용 되겠죠!

 

Array를 넣어주는 경우

<some-element [ngClass]="['first', 'second']">...</some-element>

이렇게 해 주어도 string 으로 해 주었던 것과 동일한 결과가 나타납니다.

 

직접적으로 보여드리면 

<some-element class="first second">...</some-element>

가 되는거예요!

 

 

Object 를 넣어주는 경우

object로 넣어주게 되면 특정 조건에 맞게 true 일때 특정 class 명을 붙여주고, 특정 조건에 맞지 않다면 특정  class명이 붙지 않게 설정 할 수 있어요!

 

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

이 예제는 그럼 어떻게 될까요~?

 

<some-element class="first second">...</some-element>

 

true 값이었던 first와 second만 some-element의 class에 들어가게 됩니다!

 

 

그럼 이제 조금 더 심화해서 ~ 제가 푼 예제를 공유 할게요!

 

 

 

제가 이런 표를 만들었는데요, 

 

 

이 표에서 빨간 줄로 표시 한 두 row만 형광색바탕을 적용 해 주고싶다면 어떻게 해야할까요?

 

바로 ngClass를 이용하면 돼요~

 

 <tbody>
        <tr *ngFor="let tempSalesPerson of salesPersonList">
            <td>{{tempSalesPerson.firstName}}</td>
            <td>{{tempSalesPerson.lastName}}</td>
            <td>{{tempSalesPerson.email}}</td>
            <td>{{tempSalesPerson.salesVolume | currency:'USD'}}</td>
            <td>
                <div *ngIf="tempSalesPerson.salesVolume >= 60000; else myElseBlock">Yes</div>
                <ng-template #myElseBlock>No</ng-template>
            </td>
        </tr>
 </tbody>

기존에 이렇게 짜여있던 코드에서 

 

CSS에 .yellow를 추가 해 주고

 

.yellow{
    background-color: yellow;
}

 

 

 

 <tbody>
        <tr *ngFor="let tempSalesPerson of salesPersonList" [ngClass]="{'yellow':tempSalesPerson.salesVolume >= 60000}">
            <td>{{tempSalesPerson.firstName}}</td>
            <td>{{tempSalesPerson.lastName}}</td>
            <td>{{tempSalesPerson.email}}</td>
            <td>{{tempSalesPerson.salesVolume | currency:'USD'}}</td>
            <td>
                <div *ngIf="tempSalesPerson.salesVolume >= 60000; else myElseBlock">Yes</div>
                <ng-template #myElseBlock>No</ng-template>
            </td>
        </tr>
    </tbody>

 

ngClass 해 준 부분만 더 자세히 봐 볼게요~

 

<tr *ngFor="let tempSalesPerson of salesPersonList" [ngClass]="{'yellow':tempSalesPerson.salesVolume >= 60000}">

 

[ngClass] = "{'yellow': tempSalesPerson.salesVolumn>=60000}"

 

이라고 설정 해 줌으로써 

 

tempSalesPerson.salesVolumn 의 값이 60000 이상이면 해당 HTML 태그에 yellow class가 생기고,

그렇지 않다면 해당 HTML 태그에 yellow class가 존재하지 않게 됩니다!!

 

ngClass를 사용하면 조건문을 이용해 class를 붙였다 떼었다 할 수 있습니다! 😋

 

결과 화면을 볼까요~

 

 

짜잔 ~ 잘 설정 되었습니다!

 

유용한 ngClass~ 함께 잘 익혀 봐요!

 

도움이 되셨다면 좋아요와 구독 부탁드립니다 ㅎㅎ

 

그럼 오늘도 다들 즐코 ! (∩^o^)⊃━☆