> For the complete documentation index, see [llms.txt](https://fancyloves.gitbook.io/frontendtech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fancyloves.gitbook.io/frontendtech/angularjs/fundamentals/directives/ngclass.md).

# NgClass

A [class binding](/frontendtech/angularjs/bindings/class-binding.md) is a good way to add or remove a single class.

To add or remove many CSS classes at the same time, the NgClass directive may be the better choice.

Try binding ngClass to a key:value control object. Each **key** of the object is a **CSS class name**; its **value** is true if the class should be added, false if it should be removed.

```javascript
currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };
}
```

```markup
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>
```