앵귤러 템플릿 - class binding & ngClass

앵귤러 class 바인딩은 특정요소에 동적으로 클래스를 추가하거나 제거하는 기능입니다. 클래스를 사용하여 상태에 따라 스타일 변경할 때 유용한 기능입니다. class 바인딩과 ngClass 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다.

사용문법

사용문법은 아래와 같이 클래스 속성에 클래스명을 지정하거나 (class binding)

[class.bg-dark]="boolean"

ngClass 디렉티브로 지정할 표현과 요건을 지정하는 방법으로 사용합니다 (이 방법의 경우 각 클래스를 ' , '로 분리하여 여러 클래스를 사용할 수 있는 장점이 있습니다.

[ngClass]="{className: boolean}"

사용예시

 

<!-- class-binding.component.html -->

<div class="container" [class.bg-dark]="bgMode === 'dark'">
  <h1>Class binding</h1>

  <img src="https://source.unsplash.com/random" alt="" [ngClass]="{mobile: this.bgMode === 'dark'}">

  <div class="text-box" [ngClass]="{'box-style': bgMode === 'light',
  'background': bgMode === 'light'}">

    <p>Author</p>
    <small>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, ut.</small>
  </div>

  <!-- control button -->
  <button style="position: fixed; top: 10px; right: 10px; font-size: 1.3rem; border-radius: 5px; border: none;"
    (click)="bgMode === 'dark' ? bgMode = 'light' : bgMode = 'dark'">{{bgMode}} Mode</button>
</div>

 

/* class-binding.component.css */

.container {
  height: 100vh;
  color: #696969;
  text-align: center;
}

.bg-dark {
  background-color: #696969;
  color: aliceblue;
}

button:active {
  transform: scale(0.97);
}

img {
  height: 500px;
  width: 100%;  
  object-fit: contain;
}

.mobile {
  height: 200px;
  width: 100px;
  object-fit: cover;
}

.box-style {
  color: aliceblue;  
  font-size: 1rem;
  padding: 10px 0;
}

.background {
  background-color: #696969;
}

 

/* class-binding.component.ts */

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

@Component({
  selector: 'app-class-binding',
  templateUrl: './class-binding.component.html',
  styleUrls: ['./class-binding.component.css'],
})
export class ClassBindingComponent implements OnInit {
  bgMode: string = 'dark';
  device: string = '';

  constructor() {}

  ngOnInit(): void {}
}

 

소스코드

https://github.com/jin-co/web-mobile/tree/master/Angular/classBinding

GitHub - jin-co/web-mobile

이상으로 class binding에 대해서 알아보았습니다.

---

참고

Angular