# Attribute Directives

* Change the appearance or behavior of an element, component, or another directive.

## Built-in Attribute Directives <a href="#built-in-attribute-directives" id="built-in-attribute-directives"></a>

<table><thead><tr><th width="140">Directives</th><th>Details</th></tr></thead><tbody><tr><td><code>ngClass</code></td><td>Adds or removes a set of CSS classes.</td></tr><tr><td><code>ngStyle</code></td><td>Adds and removes a set of HTML styles.</td></tr></tbody></table>

### `ngClass`

* with expression

```javascript
<!-- toggle the "special" class on/off with a property -->
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
```

* with method

{% code title="app.component.ts" %}
```typescript
currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}
```
{% endcode %}

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

### `ngStyle`

{% code title="app.component.ts" %}
```typescript
currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}
```
{% endcode %}

{% code title="app.component.html" %}
```html
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>
```
{% endcode %}
