Angular에서 ngClass를 사용하여 조건부 클래스 추가

조건부 클래스를 추가하거나 if-else 조건을 사용하여 Angular 애플리케이션에서 ngClass로 동적 클래스를 표시하는 방법을 소개합니다.

Angular에서 ngClass를 사용하여 조건부 클래스 추가

클래스는 애플리케이션의 UI를 디자인하고 생성하는 핵심 부분입니다. 우리는 애플리케이션의 다른 부분에 할당된 클래스를 기반으로 디자인을 작성합니다.

때로는 동적 클래스를 추가하거나 조건에 따라 클래스를 변경해야 합니다.

이 튜토리얼에서는 Angular의 ngClass 내에서 if-else 문을 달성하는 다양한 방법에 대해 설명합니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

조건 메시지가 app.component.ts에서 아래와 같이 설정된 경우 HTML 요소에 클래스를 추가하는 간단한 예부터 시작하겠습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    message = 'warning';
}

이제 app.component.html의 변수 message를 사용하여 조건과 함께 ngClass가 있는 HTML 요소를 추가해 보겠습니다.

# angular
<div [ngClass]="{'warning': message}">
Hello this is a warning message
</div>

그런 다음 아래 조건에 따라 div에 추가할 클래스에 CSS 코드를 추가해 보겠습니다.

# angular
.warning {
    font-family: Lato;
    background: red;
    color: white;
    padding: 10px;
}

출력:

예제에서 알 수 있듯이 ngClass 내부에서 if 문을 사용하는 것은 쉽습니다. 조건에 따라 간단하게 클래스를 추가했습니다.

이제 실제 조건을 기반으로 클래스를 추가하는 예제를 살펴보겠습니다. 조건이 거짓이면 다른 클래스를 추가합니다.

따라서 먼저 app.component.html에 조건을 추가하고 아래와 같이 조건을 변경하는 클릭 이벤트가 있는 버튼을 추가합니다.

# angular
<div [ngClass]="Warnmessage ? 'warning' : 'info'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

이제 Warnmessage 변수와 버튼을 클릭할 때 조건을 변경하는 함수를 생성해 보겠습니다. app.component.ts의 코드는 아래 스니펫과 같습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    name = 'Angular ' + VERSION.major;
    Warnmessage = true;

    changeClass() {
        this.Warnmessage = false;
        console.log('Button Clicked');
    }
}

이 코드를 실행하고 어떻게 작동하는지 확인합시다.

출력:

보시다시피 ngClass 내부에서도 if-else 문을 사용했으며 조건에서 작동합니다. 그러나 단일 조건에 따라 둘 이상의 클래스를 추가하려는 경우 공백을 추가하고 그 뒤에 새 클래스 이름을 작성하여 수행할 수도 있습니다.

# angular
<div [ngClass]="Warnmessage ? 'warning message-box' : 'info message-box'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

첫 번째 클래스 이름 뒤에 공백을 추가하고 두 번째 클래스 이름을 작성하여 여러 클래스를 추가할 수도 있습니다. 트리플 클래스를 추가하거나 원하는 만큼 추가할 수도 있습니다.