> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/angular-components/prisvoyennya-klasiv.md).

# Робота з CSS класами

Механізм динамічної роботи з CSS класами в HTML документі. Дає нам широкий спектр можливостей, та спрощує нашу розробку.

### Директива ngClass:

Директива **ngClass** дозволяє застосувати до елемента набір CSS класів. Як значення вона приймає наступні вирази:

* string - CSS класи, перелічені у рядку (розділені пробілами).

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [ngClass]="'first second'">Title page</h1>
// або
<h1 [ngClass]="true ? 'green' : 'red'">Title page</h1>
```

{% endcode %}

* array - CSS класи, оголошені як елементи масиву.

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [ngClass]="['first', 'second']">Title page</h1>
```

{% endcode %}

* Object - CSS класи, які додаються, коли вираз, заданий у значенні, буде true, інакше вони будуть видалені.

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [ngClass]="{
  'first': true,
  'second': true,
  'third': false
}">
  Title page
</h1>
```

{% endcode %}

* Варіант, коли нам потрібно присвоїти тільки один класс.

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [class.green]="true">Title page</h1>
```

{% endcode %}