[Angularjs2] 앵귤러2 ngClass 를 이용한 class 추가 제거

앵귤러2  ngClass 를 이용한 class 추가 제거

1. ngClass

- class의 클래스 이름을 더하거나 해제하는 속성 지시자

2. ngClass 예제

1) app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public isActive: boolean = false; myclass: string="active"; }

2) app.component.html

<button class="button" [ngClass]="{active: isActive}" (click)="isActive=!isActive;">{{isActive?'활성':'비활성'}}</button><br> <button [ngClass]="myclass">버튼1</button> <button [ngClass]="'active'">버튼2</button> <button bind-ngClass="myclass">버튼3</button><br> <button [attr.class]="myclass">버튼4</button> <button [class.active]="true">버튼5</button>

- 첫번 째 버튼은 토글형식으로 변한다

- 1~3 버튼은 ngClass 속성 지시자를 사용

3) app.component.css

button{ width:100px; padding:10px; margin-bottom: 10px; text-align : center; border : 1px dotted #666; } button.active{ background-color:#CFD7EB; border: 1px solid #666; }