Angular에서 클래스 추가

1. Angular에서 정적 또는 동적 클래스 추가
2. Angular에서 NgClass 사용하기

Angular에서 정적 또는 동적 클래스를 추가하기 위해 className 및 ngClass와 같은 다양한 방법을 소개합니다. Angular에서 클래스를 토글하는 방법도 소개합니다.

Angular에서 정적 또는 동적 클래스 추가

클래스는 모든 웹 애플리케이션의 주요 부분입니다. 우리는 클래스 이름에 따라 다양한 기능을 수행하고 스타일을 지정합니다.

단일 페이지 애플리케이션 프레임워크와 마찬가지로 Angular는 데이터 바인딩과 관련하여 빛을 발합니다. 해당 JavaScript 객체에 변경 사항이 있으면 DOM 요소가 자동으로 업데이트됩니다.

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

# angular
ng new my-app

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

# angular
cd my-app

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

# angular
ng serve --open

일반적으로 HTML에 클래스 이름을 추가하는 것처럼 클래스 이름을 HTML 요소에 바인딩할 수 있습니다. 유일한 차이점은 아래와 같이 class 대신 className을 사용한다는 것입니다.

# angular
<div [className]="'my-class'"></div>

위의 코드는 div 요소에 할당된 정적 클래스일 뿐임을 보여줍니다. 이제 className을 사용하여 동적 클래스를 추가하는 방법에 대해 논의해 보겠습니다.

아래와 같이 조건에 따라 요소에 클래스를 변경하거나 추가할 수 있습니다.

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

loggedIn 조건이 true이면 logged-class 클래스를 할당합니다. 조건이 false인 경우 my-class 클래스가 할당됩니다.

아래와 같이 런타임에 클래스 이름을 빌드할 수도 있습니다.

# angular
<div [className]="'class' + myValue"></div>

위의 예는 class 문자열과 myValue 값을 추가하는 것을 보여줍니다. 이 값은 런타임에 무엇이든 될 수 있고 클래스 이름을 만들 수 있습니다.

Angular에서 NgClass 사용하기

ngClass는 단지 구문상의 설탕이기 때문에 코드를 보다 간소화된 것처럼 보이게 하는 데 사용되는 지시문입니다. 사용하기 편리하고 짧습니다.

ngClass는 매우 다양합니다. 그럼 아래와 같이 ngClass를 어떻게 사용할 수 있는지 확인해 봅시다.

# angular
<div [ngClass]="'myclass'"></div>

ngClass는 또한 아래와 같이 둘 이상의 클래스 이름을 추가하는 데 도움이 됩니다.

# angular
<div [ngClass]="['my-class','second-class']"></div>

또한 아래와 같이 조건을 사용하여 클래스 이름을 할당하고 조건에 따라 전환할 수 있습니다.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

아래와 같이 서로 다른 두 가지 조건에 따라 여러 클래스를 할당할 수도 있습니다.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

아래와 같이 두 가지 다른 조건을 사용할 수도 있습니다.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

따라서 이러한 방식으로 ClassName 및 ngClass를 사용하여 조건에 따라 클래스를 쉽게 할당할 수 있습니다. 또한 Angular 지시문을 사용하여 동적, 정적 또는 여러 클래스를 추가하는 방법도 배웠습니다.