=====ngClass=====

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

<code javascript>
[ngClass]={
    "класс1": true/false,
    "класс2": true/false,
    ...................
}
</code>
Например, определим следующий компонент:

<code javascript>
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 { }
</code>
В секции styles у компонента определены два класса, которые устанавливают различные стилевые свойства шрифта: //verdanaFont// и //segoePrintFont//.\\
\\
В шаблоне для привязки класса к элементу применяется директива ''[ngClass]="{verdanaFont:true}"''. Эта директива принимает js-объект, в котором ключи - это названия классов. Этим названиям присваиваются булевые значения true (если класс применяется) и false (если класс не применяется). То есть в данном случае класс verdanaFont будет применяться ко всему блоку div.\\
\\
Однако в блоке div есть параграф, и мы, допустим, хотим, чтобы к этому параграфу применялся другой класс. А по умолчанию вложенный параграф унаследует стили от родительского блока div и также применяет класс segoePrintFont, в котором можно переопределить унаследованные стили.\\
{{ :angular:angular2:directive:3.1.png |}}\\

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

<code javascritp>
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;
}
</code>


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

<code javascript>
<div [class.verdanaFont]="true">
    <h1>Hello Angular</h1>
    <p [class.verdanaFont]="false" [class.segoePrintFont]="true">
        Angular представляет модульную архитектуру приложения
    </p>
</div>
</code>
Выражение ''[class.verdanaFont]="true"'' указывает, что класс verdanaFont будет применяться для данного элемента.\\
\\
Однако с помощью ngClass мы можем задать целый набор классов, которые применяются к элементу:

<code javascript>
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
    }
}
</code>

В данном случае для элемента устанавливаются два класса verdanaFont и navyColor.\\
{{ :angular:angular2:directive:3.9.png |}}