Шесть ключевых директив Angular

Вы можете добавлять директивы в HTML вашего Angular‑проекта. Одни управляют структурой разметки, другие — атрибутами и поведением элементов. Ниже — практическое руководство с примерами и дополнительными материалами для быстрой интеграции в реальные проекты.

Что такое директивы Angular

Директивы Angular позволяют управлять видимостью, повторением и внешним видом HTML‑блоков, а также связывать данные между шаблоном и кодом. Условно директивы делятся на два типа:

• структурные (изменяют структуру DOM): ngIf, ngFor, ngSwitch;
• атрибутные (изменяют свойства/стили/связывание): ngClass, ngStyle, ngModel.

Важно: директивы с префиксом * являются структурными (они меняют DOM), а без * — атрибутные (меняют свойства элемента).

Как использовать ngIf

ngIf показывает элемент, если условие истинно. Часто применяется для сообщений об ошибках, заглушек и ленивой загрузки.

1. Пример переменных в TypeScript (component.ts):

noPlaylists: boolean = false;
playlists: any[] = [];

constructor() { }

ngOnInit(): void {
  if (this.playlists.length === 0) {
    this.noPlaylists = true;
  }
}

2. Условный блок в шаблоне (component.html):

  Плейлисты не найдены.

3. Добавление альтернативы через шаблон ng-template:

  Плейлисты не найдены.



  

    Плейлисты найдены.
  

Совет: избегайте логики в шаблоне (сложных цепочек вызовов). Выносите вычисления в геттеры или методы компонента для тестируемости.

Как использовать ngFor

ngFor повторяет блок для каждого элемента коллекции. Это стандарт для списков.

1. Пример массива в компоненте:

playlists: any[] = [
  { name: 'Rock', numberOfSongs: 5 },
  { name: 'Contemporary', numberOfSongs: 9 },
  { name: 'Popular', numberOfSongs: 14 },
  { name: 'Acoustic', numberOfSongs: 3 },
  { name: 'Wedding Songs', numberOfSongs: 25 },
  { name: 'Metal', numberOfSongs: 0 },
];

2. Шаблон с ngFor (component.html):

Плейлисты найдены.

  

    {{ playlist.name }}
    {{ playlist.numberOfSongs }} песен
  

Пояснение: внутри *ngFor локальная переменная playlist ссылается на текущий объект. Можно также получить index, first, last, even, odd.

Как использовать ngClass

ngClass позволяет условно назначать CSS‑классы.

1. Пример CSS:

.songs {
  background-color: #F7F5F2;
}
.noSongs {
  background-color: #FFA8A8;
}

2. Использование внутри ngFor:

  

    {{ playlist.name }}
    {{ playlist.numberOfSongs }} песен
  

Если numberOfSongs > 0 — применится класс songs (серый фон), иначе — noSongs (красный фон).

Как использовать ngStyle

ngStyle даёт гибкий контроль инлайн‑стилей, когда нужно динамически менять несколько CSS‑свойств.

  

    {{ playlist.name }}
    {{ playlist.numberOfSongs }} песен
  

Для нескольких стилей используйте объект с несколькими парами ключ‑значение:

[ngStyle]="{
  'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8',
  'color': playlist.numberOfSongs > 0 ? 'black' : 'darkblue'
}"

Важно: используйте ngStyle для динамических значений, но предпочтительнее поддерживать стили через классы (ngClass) для упрощения тестирования и переиспользования.

Как использовать ngModel

ngModel реализует двустороннее связывание (two‑way binding) значений формы между компонентом и шаблоном.

1. Включите FormsModule в app.module.ts:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...,
    FormsModule
  ]
})

2. Переменные в компоненте:

renamingPlaylists: boolean = false;
public playlists: any[] = [
  ...
];

3. Кнопки переключения режима переименования и поле ввода в шаблоне:

Переименовать плейлисты
Прекратить переименование


  

    {{ playlist.name }}
    
    {{ playlist.numberOfSongs }} песен
  

При изменении значения в input поле playlist.name автоматически обновит компонент, и наоборот.

Как использовать ngSwitch

ngSwitch позволяет показывать разные блоки в зависимости от значения (подходит для рейтингов, статусов, типов).

1. Добавим свойство rating к объектам:

public playlists: any[] = [
  { name: 'Rock', numberOfSongs: 5, rating: 5 },
  { name: 'Contemporary', numberOfSongs: 9, rating: 1 },
  { name: 'Popular', numberOfSongs: 14, rating: 5 },
  { name: 'Acoustic', numberOfSongs: 3, rating: 4 },
  { name: 'Wedding Songs', numberOfSongs: 25, rating: 5 },
  { name: 'Metal', numberOfSongs: 0, rating: 0 },
];

2. Пример шаблона с ngSwitch:

  {{ playlist.name }}
  {{ playlist.numberOfSongs }} песен


  
★
  
★★
  
★★★
  
★★★★
  
★★★★★
  
Нет рейтинга

Сравнение директив — краткая матрица

Когда каждая директива не подходит (контрпримеры)

• ngIf: не подходит, если нужно показывать/скрывать элементы без разрушения и восстановления состояния компонента; в таких случаях лучше использовать скрытие через CSS ([hidden]/visibility) или управление через классы.
• ngFor: не подходит для очень больших наборов без виртуализации (используйте CDK virtual scroll для тысяч элементов).
• ngClass/ngStyle: не подходят, если стили зависят от множества условий — лучше вычислять класс в компоненте или использовать CSS-классы с модификаторами.
• ngModel: не подходит для сложных форм — используйте ReactiveForms для сложной валидации и тестирования.
• ngSwitch: не подходит, если число кейсов динамично и меняется — генерируйте шаблоны программно или применяйте карту значений в компоненте.

Методология выбора директивы — мини‑гайд

1. Определите цель: показать/скрыть, повторить, изменить стиль или синхронизировать ввод.
2. Если повторять набор — ngFor. Если условная отрисовка — ngIf. Если простая визуальная вариация — ngClass/ngStyle.
3. Для форм и двусторонней связи — ngModel (простые случаи) или ReactiveForms (сложные валидации).
4. Если элементы должны сохранять состояние при скрытии — избегайте уничтожения компонента через ngIf, используйте CSS или hidden.

Чек‑лист для разработчика перед сдачей фичи

• Нет тяжёлой логики в шаблоне.
• Используются trackBy в ngFor для массивов с динамическим обновлением.
• Для больших списков применена виртуализация.
• Для форм, требующих валидации, используется ReactiveForms.
• Стили вынесены в CSS/SCSS, а не в длинные ngStyle‑объекты без причины.
• Тексты в шаблоне локализованы (i18n) при необходимости.

Критерии приёмки (acceptance)

• ngIf корректно показывает альтернативный шаблон через else.
• ngFor корректно рендерит элементы и использует trackBy при изменениях коллекции.
• ngClass/ngStyle применяют нужные стили при разных значениях полей.
• ngModel синхронизирует поле ввода и значение в компоненте в обоих направлениях.
• ngSwitch отображает правильный кейс для каждой записи.

Тест‑кейсы для автоматизированного тестирования

1. ngIf: при пустом массиве playlists компонент должен показывать сообщение «Плейлисты не найдены», при непустом — скрывать.
2. ngFor + trackBy: при вставке элемента в начало списка рендерятся только необходимые элементы (проверка DOM по ключам).
3. ngClass: элемент с numberOfSongs = 0 должен содержать класс noSongs.
4. ngModel: изменение значения в input должно изменить поле объекта playlist и отразиться в другом месте шаблона.
5. ngSwitch: рейтинг 4 должен отобразить 4 звезды.

Роли и задачи: что должен сделать кто

• Разработчик: написать компонент, вынести стили, добавить trackBy в ngFor, покрыть тестами.
• Ревьюер: проверить простоту выражений в шаблоне, отсутствие побочных эффектов и соответствие критериям приёмки.
• QA: прогнать тест‑кейсы, проверить поведение при граничных данных (пустые массивы, null, undefined).

Глоссарий — одно предложение на термин

• Директива: специальная атрибуция в шаблоне, которая меняет поведение или внешний вид DOM‑элемента.
• Структурная директива: директива, изменяющая структуру DOM (вставляет/удаляет элементы).
• Атрибутная директива: директива, изменяющая свойства, классы или стили существующего элемента.
• Two‑way binding: двусторонняя синхронизация значения между шаблоном и компонентом.

Факты и рекомендации

• В Angular чаще всего используются 6 директив, описанных выше.
• Для производительности используйте trackBy в ngFor и избегайте частых перерасчётов в шаблоне.
• Для больших форм и бизнес‑логики предпочитайте ReactiveForms.

Important: при переводе интерфейсных строк (тексты кнопок, сообщения) учитывайте локализацию и возможность интеграции с i18n.

Краткое резюме

Вы изучили базовый набор директив Angular и получили практические примеры их применения: ngIf для условий, ngFor для списков, ngClass/ngStyle для стилизации, ngModel для простого связывания форм и ngSwitch для множественного выбора. Применяйте методологию выбора, используйте чек‑листы и тест‑кейсы для контроля качества.

Summary:

• Используйте структурные директивы для управления DOM; атрибутные — для стилей и связывания.
• Предпочитайте классы (ngClass) инлайн‑стилям (ngStyle) где возможно.
• Для сложных форм переходите на ReactiveForms.

Если нужно, могу подготовить готовый репозиторий‑шаблон с этими примерами и тестами для вашего проекта.