Директивы

Директивы определяют набор инструкций, которые применяются при рендеринге html-кода. Директива представляет класс с директивными метаданными. В TypeScript для прикрепления метаданных к классу применяется декоратор @Directive.

В Angular есть три типа директив:

• Компоненты: компонент по сути также является директивой, а декоратор @Component расширяет возможности декоратора @Directive с помощью добавления функционала по работе с шаблонами.

• Атрибутивные: они изменяют поведение уже существующего элемента, к которому они применяются. Например, ngModel, ngStyle, ngClass

• Структурные: они изменяют структуру DOM с помощью добавления, изменения или удаления элементов html. Например, это директивы ngFor и ngIf

ngClass и ngStyle

ngClass

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

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

Чтобы использовать эту директиву, надо импортировать класс NgClass из модуля @angular/common.

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

import { Component} from "@angular/core";
import {NgClass} from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [NgClass],
    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";
import {NgClass} from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [NgClass],
    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";
import {NgClass} from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [NgClass],
    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.

ngStyle

Директива ngStyle позволяет задать набор стилей, которые применяются к элементу. В качестве значения директива принимает js-объект, в котором ключи - названия свойств CSS:

import { Component} from "@angular/core";
import {NgStyle} from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [NgStyle],
    template: `

                    
Hello Angular 17
                    

                        Приложение Angular состоит из компонентов
                    
                
`
})
export class AppComponent { }

Для использования директивы ngStyle необходимо импортировать класс NgStyle из пакета @angular/common

Аналогично для установки стилей можно применять свойства объекта style:

<div [style.fontSize]="'13px'" [style.fontFamily]="'Verdana'">
	<h1>Hello Angular 17</h1>
	<p [style.fontSize]="'14px'" [style.fontFamily]="'Segoe Print'">
		Приложение Angular состоит из компонентов
	</p>
</div>

Также мы можем установить привязку

Динамическое изменение стилей

Директивы ngClass и ngStyle позволяют устанавливать привязку к выражениям, благодаря чему мы можем динамически менять стили или классы. Например:

import { Component} from "@angular/core";
import {NgClass} from "@angular/common";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [NgClass],
    template: `<div [ngClass]="{invisible: visibility}">
					<h1>Hello Angular 17</h1>
					<p>
						Приложение Angular состоит из компонентов
					</p>
			    </div>
				<button (click)="toggle()">Toggle</button>`,
	styles: [ `.invisible{display:none;}`]
})
export class AppComponent { 
	
	visibility: boolean = true;
	// переключаем переменную
	toggle(){
		this.visibility=!this.visibility;
	}
}

Выражение [ngClass]="{invisible: visibility}" устанавливает для класса invisible привязку к значению переменной visibility. По нажатию на кнопку мы можем переключать это свойство, тем самым управляя видимостью блока.

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

<div [class.invisible]="visibility">

Либо также можно было бы написать так:

<div [style.display]="visibility?'block':'none'">