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

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

Директива ngClass:

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

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

app.component.html

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

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

app.component.html

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

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

app.component.html

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

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

app.component.html

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