Директива ngClass позволяет определить набор классов, которые будут применяться к элементу. В качестве значения она принимает набор классов в следующем виде:

[ngClass]={
    "класс1": true/false,
    "класс2": true/false,
    ...................
}

Например, определим следующий компонент:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div [ngClass]="{verdanaFont:true}">
                    <h1>Hello Angular</h1>
                    <p [ngClass]="{segoePrintFont:true}">
                        Angular представляет модульную архитектуру приложения
                    </p>
                </div>`,
    styles: [
        `.verdanaFont{font-size:13px; font-family:Verdana;}
        .segoePrintFont{font-size:14px; font-family:"Segoe Print";}`
    ]
})
export class AppComponent { }

В секции styles у компонента определены два класса, которые устанавливают различные стилевые свойства шрифта: verdanaFont и segoePrintFont.

В шаблоне для привязки класса к элементу применяется директива [ngClass]=«{verdanaFont:true}». Эта директива принимает js-объект, в котором ключи - это названия классов. Этим названиям присваиваются булевые значения true (если класс применяется) и false (если класс не применяется). То есть в данном случае класс verdanaFont будет применяться ко всему блоку div.

Однако в блоке div есть параграф, и мы, допустим, хотим, чтобы к этому параграфу применялся другой класс. А по умолчанию вложенный параграф унаследует стили от родительского блока div и также применяет класс segoePrintFont, в котором можно переопределить унаследованные стили.

Вместо жестко закодированных значений true/false мы можем использовать привязку к выражениям:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div [ngClass]="{verdanaFont:isVerdana}">
                    <h1>Hello Angular</h1>
                    <p [ngClass]="{segoePrintFont:isSegoe}">
                        Angular представляет модульную архитектуру приложения
                    </p>
                </div>`,
    styles: [
        `.verdanaFont{font-size:13px; font-family:Verdana;}
        .segoePrintFont{font-size:14px; font-family:"Segoe Print";}`
    ]
})
export class AppComponent { 
    isVerdana = true;
    isSegoe = true;
}

В качестве альтернативы мы можем использовать следующие выражения привязки:

<div [class.verdanaFont]="true">
    <h1>Hello Angular</h1>
    <p [class.verdanaFont]="false" [class.segoePrintFont]="true">
        Angular представляет модульную архитектуру приложения
    </p>
</div>

Выражение [class.verdanaFont]=«true» указывает, что класс verdanaFont будет применяться для данного элемента.

Однако с помощью ngClass мы можем задать целый набор классов, которые применяются к элементу:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div [ngClass]="currentClasses">
                    <h1>Hello Angular</h1>
                    <p>
                        Angular представляет модульную архитектуру приложения
                    </p>
                </div>`,
    styles: [
        `.verdanaFont{font-size:13px; font-family:Verdana;}
        .navyColor{color:navy;}`
    ]
})
export class AppComponent { 
 
    isVerdana = true;
    isNavy = true;
 
    currentClasses={
        verdanaFont: this.isVerdana,
        navyColor: this.isNavy
    }
}

В данном случае для элемента устанавливаются два класса verdanaFont и navyColor.