Angular에서 요소에 클래스 추가

1. Angular 4 없이 클래스 추가
2. Angular 4의 ClassName 속성을 사용하여 요소에 클래스 추가
3. Angular 4에서 NgClass 지시문을 사용하여 요소에 클래스 추가

Angular 4는 웹 애플리케이션을 구축하기 위한 프레임워크입니다. TypeScript를 기반으로 하며 Angular 2보다 강력하고 유연하게 만드는 많은 기능이 있습니다.

Angular 4를 더욱 강력하게 만드는 기능 중 하나는 요소에 클래스를 추가하는 개념입니다.

Angular 4에서 요소에 클래스를 추가하는 가장 쉬운 방법은 NgClass 지시문과 함께 HTML 속성 선택기 구문을 사용하는 것입니다.

이 구문은 모든 HTML 태그에서 사용할 수 있으며 한 번에 여러 클래스를 적용할 수 있으며 다른 지시문이나 스타일시트 규칙에서 필요에 따라 적용할 수 있습니다.

이 기사에서는 Angular 4의 요소에 클래스를 추가하는 방법을 철저히 다룹니다.

그 전에 기존 JavaScript를 사용하여 클래스를 할당하는 방법과 Angular에서 할당하는 방법을 살펴보겠습니다.

Angular 4 없이 클래스 추가

인기 있는 JavaScript 라이브러리 Angular는 NgClass 지시문을 사용하여 이를 수행하는 방법을 제공합니다. 이 지시문을 사용하면 동적으로 쉽게 요소에서 클래스를 추가 및 제거할 수 있습니다.

그러나 Angular를 사용하지 않는 경우 JavaScript를 사용하여 이 작업을 수행하는 몇 가지 다른 방법이 있습니다.

addClass라는 jQuery 플러그인을 사용하면 jQuery로 초기화된 모든 요소에 클래스를 쉽게 추가할 수 있습니다. JavaScript에서 .setAttribute() 메서드를 사용하고 조작되는 DOM 노드에서 className 속성을 설정할 수도 있습니다.

Angular 4의 ClassName 속성을 사용하여 요소에 클래스 추가

Angular 4에서 className 속성에 직접 바인딩하기 위해 ClassName 속성을 사용합니다. 선택기 뒤에 대괄호를 사용하거나 ClassName 도트 구문을 사용하여 액세스하는 모든 요소에 클래스를 추가합니다.

<div
    [className]="isActive ? 'active' : 'inactive'">
</div>

isActive가 true를 반환하면 active 클래스가 추가됩니다. 그렇지 않으면 inactive는 동일하게 유지됩니다.

Angular 4에서 NgClass 지시문을 사용하여 요소에 클래스 추가

NgClass 지시문에 대한 많은 사용 사례가 있습니다. 가장 일반적인 것 중 하나는 사용자가 요소를 클릭할 때 요소에 클래스를 추가하는 것입니다.

NgClass 지시문을 사용하면 특정 조건에 따라 요소에 클래스를 추가할 수 있습니다. 예를 들어 사용자가 구성 요소를 클릭하면 해당 요소에 활성 클래스를 추가할 수 있습니다.

NgClass 지시문은 Angular 애플리케이션의 요소에서 클래스를 동적으로 추가 및 제거할 수 있기 때문에 유용합니다. 또한 지시문 자체는 적응력이 뛰어나 입력을 기반으로 다양한 작업을 수행합니다.

예를 들어 NgClass를 사용하여 정적 클래스를 할당한다고 가정합니다. 구문에 대해 논의해 보겠습니다.

<div [ngClass]="'Class-Name'">/div>

‘NgClass’는 여러 정적 클래스 이름을 동시에 할당할 수도 있습니다.

<div [ngClass]="['Class-Name', 'other-class']">/div>

Angular 4에서 요소에 클래스를 추가하는 완전한 예

HTML 코드:

<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>
<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>

CSS 코드:

p {
    font-family: Lato;
}
.blue {
    background-color: blue;
}
.red-border {
    border: 2px solid red;
}
*{
    color: white;
}

타입스크립트 코드:

import { Component, ViewChild, OnInit, Renderer2, ElementRef, } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 4';
    something = 'first';
    constructor(private renderer: Renderer2) {}
}

여기를 클릭하여 위에서 언급한 예제의 라이브 데모를 확인하십시오.