ngClass를 사용하는 각도 동적 클래스

어제 우리는 dynamic form fields 을 살펴보았는데 Angular의 커스텀 클래스에 대해 생각하게 되었습니다.

조건에 따라 class1를 추가하거나 조건이 충족되지 않으면 class2를 추가할 수 있습니다.

우리는 어떻게 그런 일을 달성할 수 있습니까?
글쎄, 그것이 ngClass가 유용한 곳입니다.

ngClass 작동 방식

동적으로 만들기 전에 먼저 조건 없이 어떻게 보이는지 살펴보겠습니다.

저와 함께 작업하고 싶다면 this branch as the starter template을 사용하고 있습니다.
app.component.html 파일을 엽니다.

다음을 추가하십시오.

<div [ngClass]="'m-8 p-8 bg-blue-500'">Hi, I'm the div</div>

이렇게 하면 이 div에 세 개의 클래스가 추가됩니다.
그러면 다음과 같이 표시됩니다.



하지만 이제 조건에 따라 동적 클래스를 소개하겠습니다.

<div [ngClass]="[color ? 'bg-blue-500' : 'bg-purple-500']">Hi, I'm the div</div>

이것은 역 부울 검사이므로 color 변수가 참인지 확인합니다. 파란색이 아니면 보라색이 됩니다.

이제 이 변수를 app.component.ts 파일에 추가해야 합니다.

export class AppComponent {
  color: boolean = false;
}

이것을 실행하면 올바른 보라색 블록이 나타납니다. 상태를 전환하는 간단한 클릭 기능을 추가해 보겠습니다.

<div (click)="color = !color" [ngClass]="[color ? 'bg-blue-500' : 'bg-purple-500']">
  Hi, I'm the div
</div>

이렇게 하면 색상 변수가 반대로 전환됩니다.

이제 클릭하면 색상이 변경되는 것을 볼 수 있습니다.



그리고 이를 통해 Angular에서 클래스를 동적으로 변경하는 방법을 배웠습니다.

다음GitHub repo에서 오늘의 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나