Урок №3

1. Компонент — деталь конструктора Angular

Angular строит приложение из компонентов. Компонент — это связка: данные + логика + разметка + стили.

В уроке 1 (разделы 20–21) мы впервые увидели Angular-компонент, создали первый список задач через CLI и подключили его к корню. В уроке 2 мы разобрали JavaScript и TypeScript, на которых строится класс компонента. Теперь соединим всё вместе и посмотрим на компонент детально.

Компонент объединяет три части:

• TypeScript-класс — данные (поля) и поведение (методы);
• template — разметка, связанная с данными;
• styles — внешний вид, по умолчанию ограниченный этим компонентом.

Экран TaskFlow собирается из нескольких компонентов:

App (корень)
└── TaskList
    ├── TaskItem (повторяется для каждой задачи)
    ├── FilterBar
    ├── StatsBar
    └── TaskForm

В этом уроке мы построим эти компоненты и свяжем их данными через шаблон. Именно шаблон — наша главная тема.

2. Структура standalone-компонента

Современный Angular (начиная с 17 версии и в нашем проекте 22) использует standalone API. Компонент не обязан жить внутри NgModule — он сам объявляет, что ему нужно для работы, через поле imports.

Контекст. Так выглядит минимальный каркас любого современного компонента TaskFlow.

Что увидит пользователь. Пока это только код — на экране ничего не появится, пока мы не используем тег компонента в шаблоне и не запустим ng serve.

import { Component } from '@angular/core';

@Component({
  selector: 'app-task-item',
  standalone: true,
  imports: [],
  templateUrl: './task-item.html',
  styles: [`...`]
})
export class TaskItem {
  title = 'Изучить Angular';
}

3. Декоратор @Component: selector, template, styles

Декоратор @Component сообщает Angular, как обрабатывать класс: считать его компонентом, какой у него шаблон и как его стилизовать.

Selector

Selector определяет способ встраивания. Чаще всего это имя тега с префиксом app:

selector: 'app-task-item'
// использование в разметке:
<app-task-item />

Возможны и другие формы selector'а:

// по атрибуту
selector: '[appTaskItem]'   // <div appTaskItem></div>

// по классу
selector: '.app-task-item'  // <div class="app-task-item"></div>

Template и Styles

Небольшую разметку удобно держать строкой (шаблонная строка в обратных кавычках), большую — в отдельном файле:

// маленький компонент — всё рядом
@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<p>Привет, {{ name }}</p>`,
})
export class Greeting {
  name = 'Anna';
}

// большой компонент — файлы раздельно
@Component({
  selector: 'app-task-list',
  standalone: true,
  templateUrl: './task-list.html',
  styleUrls: ['./task-list.css'],
})
export class TaskList { }

4. Зелёный проект: подготовка TaskFlow

Перед кодом убедимся, что проект на месте и сервер разработки запускается. Проект мы создали в уроке 1 (раздел 36).

# Запуск сервера разработки (откроет http://localhost:4200)
cd task-flow-angular
ng serve --open

Если проект уже создан, повторно его создавать не нужно. Проверка — команда в отдельном терминале:

ng version

Начнём с корневого компонента App. Это действие: создайте два файла в папке src/app/.

// app.ts — корневой компонент приложения
import { Component } from '@angular/core';
import { TaskList } from './task-list/task-list';

@Component({
  selector: 'app-root',        // каким тегом использовать (<app-root>)
  standalone: true,            // современный автономный компонент
  imports: [TaskList],          // подключаем дочерний компонент
  templateUrl: './app.html',    // внешний шаблон (разметка)
})
export class App {
  title = 'TaskFlow';           // поле, которое увидим в шаблоне
}

<!-- app.html — разметка корневого компонента -->
<h1>{{ title }}</h1>        <!-- интерполяция: выведет "TaskFlow" -->
<app-task-list />          <!-- место для списка задач -->

Компонент TaskList мы построим в разделе 25. Пока он не создан, на время разработки можно закомментировать строку импорта или создавать компонент заранее.

5. Интерполяция {{ }}

Интерполяция {{ }} подставляет значение выражения из класса в текст разметки. Это первый и самый частый способ показать данные.

Контекст. В TaskFlow так выводятся заголовки задач, счётчики и статусы. Ниже — класс с данными и шаблон, который их показывает.

// task-item.ts
export class TaskItem {
  title = 'Изучить Angular';
  count = 3;
  completed = false;
}

<h3>{{ title }}</h3>
<p>Вложено шагов: {{ count }}</p>
<p>Выполнено: {{ completed }}</p>

Внутри фигурных скобок — обычное выражение TypeScript/JavaScript. Его результат конвертируется в строку и вставляется в текст.

<p>Через год: {{ count + 1 }}</p>
<p>Заглавными: {{ title.toUpperCase() }}</p>
<p>Статус: {{ completed ? 'готово' : 'в работе' }}</p>
<p>Первая буква: {{ title[0] }}</p>

Интерполяция используется повсеместно: заголовки, подписи, сообщения, счётчики. Например, вывести счётчик и время обновления:

<p>Всего задач: {{ tasks.length }}</p>
<p>Осталось: {{ tasks.filter(t => !t.completed).length }}</p>
<p>Обновлено: {{ updatedAt.toLocaleTimeString() }}</p>

Здесь внутри {{ }} вызван метод filter() прямо в выражении. Это допустимо, но для сложных расчётов лучше выносить логику в метод или computed-значение — шаблон останется читаемым, а производительность выше (раздел 28.9).

6. Выражения в шаблоне: что можно и что нельзя

Шаблонное выражение — это выражение (вспомните разницу «выражение vs инструкция» из урока 2, раздел 2). Поэтому в нём есть ограничения.

Поэтому сложную логику выносите в методы класса:

// в классе
getStatus() {
  return this.completed ? 'готово' : 'в работе';
}

<!-- в шаблоне -->
<p>{{ getStatus() }}</p>

7. Property binding [ ]

Property binding [свойство]="выражение" передаёт значение из класса в свойство DOM-элемента или директивы. Говорят «данные вниз»: от TypeScript к представлению.

<input [value]="title" />
<button [disabled]="completed">Начать</button>
<img [src]="imageUrl" [alt]="title" />

Когда значение в классе изменяется, Angular обновляет свойство элемента. Сравните: value="title" (без скобок) — это статический атрибут. [value]="title" (в скобках) — динамическая привязка.

Пример из TaskFlow — отключить кнопку, пока не введено название:

// в классе
title = '';
get canSave() {
  return this.title.trim().length > 0;
}

<input [value]="title" />
<button [disabled]="!canSave">Сохранить</button>

8. Attribute binding и class/style binding

Иногда свойство и атрибут различаются. Чтобы связаться именно с атрибутом, используем [attr.имя].

<td [attr.colspan]="colspan">Объединённая ячейка</td>
<input [attr.aria-label]="label" />

Привязка классов

Класс CSS добавляется по условию — это связь «внешний вид зависит от состояния» из урока 1 (раздел 10).

<li [class.done]="task.completed">
  {{ task.title }}
</li>

Класс done появится, только когда task.completed истинно. Так мы визуально отмечаем выполненные задачи без ручной работы с DOM.

Несколько классов через объект:

<div [class]="{
  'task': true,
  'task--done': task.completed,
  'task--high': task.priority === 'high'
}">
  {{ task.title }}
</div>

Привязка стилей

<p [style.color]="task.completed ? 'gray' : 'black'">
  {{ task.title }}
</p>

С префиксом единицы измерения:

<div [style.opacity]="task.completed ? 0.5 : 1">...</div>
<div [style.width.%]="progress">...</div>

9. Event binding ( )

Event binding (событие)="действие()" реагирует на событие DOM-элемента или компонента и вызывает метод класса. Это «событие вверх»: от пользователя к логике.

Контекст. В TaskFlow через (click) отмечают задачу выполненной. Ниже — метод toggle(), который меняет состояние, и кнопка, вызывающая его.

// task-item.ts
export class TaskItem {
  completed = false;

  toggle() {
    this.completed = !this.completed;
  }
}

<button (click)="toggle()">Переключить статус</button>

Когда пользователь кликает, Angular вызывает toggle(). Состояние меняется, и (после перерисовки) обновляется интерфейс.

Другие события:

<input (input)="onInput()" />
<input (change)="onChange()" />
<form (submit)="onSubmit()">...</form>
<select (change)="onSelect()">...</select>

10. События: $event и передача данных

Внутри обработчика доступна специальная переменная $event — объект события. Её можно передать методу.

<input (input)="onInput($event)" />

// в классе
onInput(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  console.log(value);
}

Через $event удобно обрабатывать поля ввода. А вот запись «двустороннего» связывания через сигналы, когда значение можно и показать, и обновить, появится в разделе 21 и позже (в уроке 5).

Для кнопок и форм часто проще не читать $event, а читать значение из компонента напрямую:

// в классе
newTitle = '';

addTask() {
  if (this.newTitle.trim() === '') {
    return; // guard clause из урока 2
  }
  console.log('Добавляем:', this.newTitle);
  this.newTitle = '';
}

<input [value]="newTitle" (input)="onInput($event)" />
<button (click)="addTask()">Добавить</button>

11. Направления связи: две стрелки

Две пары скобок образуют ментальную модель связи класса и шаблона.

Интерполяция {{ }} — частный случай чтения данных (вниз). Event binding ( ) — это вверх. Никакой из них по отдельности не даёт «двусторонней» связи — для неё нужны оба вместе, о чём поговорим в разделе 21.

12. Control flow: @if, @else, @else if

Современный Angular предоставляет встроенный синтаксис управления потоком прямо в шаблоне. @if условно выводит блок разметки.

Контекст. В TaskFlow @if показывает список задач, когда они есть, и сообщение «Пока нет задач», когда пусто.

@if (tasks.length > 0) {
  <p>Задач: {{ tasks.length }}</p>
} @else {
  <p>Пока нет задач</p>
}

Несколько условий:

@if (status === 'loading') {
  <p>Загружаем…</p>
} @else if (status === 'error') {
  <p>Ошибка загрузки</p>
} @else {
  <p>Готово</p>
}

Условие — это любое выражение, возвращающее истину или ложь. Проверки на null, пустую строку, длину массива — всё из арсенала строгих сравнений из урока 2 (раздел 5).

@if (task && task.title) {
  <p>{{ task.title }}</p>
}

13. Control flow: @for, track, $index, @empty

@for перебирает коллекцию и выводит содержимое блока для каждого элемента. Это основной способ построить список.

Контекст. В TaskFlow @for строит строки списка из массива tasks. Ключ track task.id помогает Angular не перепутать задачи при обновлении.

@for (task of tasks; track task.id) {
  <app-task-item [task]="task" />
}

Пустой список — отдельный случай. Блок @empty показывает разметку, когда коллекция пуста:

@for (task of tasks; track task.id) {
  <app-task-item [task]="task" />
} @empty {
  <p>Задач пока нет — добавьте первую!</p>
}

Внутри блока доступны специальные переменные цикла:

@for (task of tasks; track task.id; let i = $index; let first = $first; let last = $last) {
  <p>
    {{ first ? 'Начало: ' : '' }}
    {{ i + 1 }}. {{ task.title }}
    {{ last ? ' (конец)' : '' }}
  </p>
}

14. Control flow: @switch и @case

@switch выбирает одну ветку из нескольких по значению. Это прямое применение literal types и discriminated unions из урока 2 (разделы 31–32).

Контекст. В TaskFlow @switch по приоритету задачи показывает бейдж «Высокий / Средний / Низкий».

@switch (task.priority) {
  @case ('high') {
    <span class="badge badge-high">Высокий приоритет</span>
  }
  @case ('medium') {
    <span class="badge badge-medium">Средний</span>
  }
  @default {
    <span class="badge badge-low">Низкий</span>
  }
}

Блок @default выполняется, когда ни один @case не совпал. Его можно опустить, если ветка «по умолчанию» не нужна.

Ещё пример — типы задач из будущих версий TaskFlow:

@switch (task.kind) {
  @case ('task') { <span>Задача</span> }
  @case ('note') { <span>Заметка</span> }
  @case ('subtask') { <span>Подзадача</span> }
  @default { <span>Другое</span> }
}

15. Вложенный control flow: фильтрация в шаблоне

Control flow можно вкладывать: внутри @for — @if, внутри условия — ещё список. Так строятся реальные экраны.

@for (group of groups; track group.name) {
  <h3>{{ group.name }} ({{ group.tasks.length }})</h3>
  @for (task of group.tasks; track task.id) {
    <app-task-item [task]="task" />
  } @empty {
    <p>Нет задач в этой группе</p>
  }
}

Частая задача — показать список, отфильтрованный по статусу. В шаблоне Angular нет произвольных инструкций, поэтому фильтровать лучше через метод или геттер класса:

// в классе
get activeTasks(): Task[] {
  return this.tasks.filter(t => !t.completed);
}

@for (task of activeTasks; track task.id) {
  <app-task-item [task]="task" />
}

Здесь filter() из урока 2 (раздел 9) работает в классе, а шаблон остаётся простым и понятным.

16. Модель Task и её связь с шаблоном

Модель Task мы создали в уроке 2 (разделы 40–42). Теперь она станет типом данных, которые шаблон отображает.

// task.ts
export interface Task {
  id: number;
  title: string;
  completed: boolean;
  priority: 'high' | 'medium' | 'low';
}

Добавим необязательные поля, которые используются в интерфейсе:

export interface Task {
  id: number;
  title: string;
  completed: boolean;
  priority: 'high' | 'medium' | 'low';
  tags?: string[];            // необязательно
  dueDate?: Date | null;      // может отсутствовать
}

Необязательные свойства (оператор ?) мы разбирали в уроке 2, раздел 33. В шаблоне с ними работает оператор необязательности ?:

<p>Срок: {{ task.dueDate?.toLocaleDateString() ?? 'не задан' }}</p>

?.toLocaleDateString() не упадёт, если даты нет, а ?? подставит запасное значение.

17. Рендер списка TaskFlow

Соберём первый осмысленный экран: список задач на основе модели Task и всего контрольного потока.

// task-list.ts — файл класса компонента (создайте в src/app/task-list.ts)
import { Component } from '@angular/core';
import { TaskItem } from '../task-item/task-item'; // дочерний компонент
import type { Task } from '../task';              // тип модели Task

@Component({
  selector: 'app-task-list',   // тег для вставки: <app-task-list></app-task-list>
  standalone: true,            // современный компонент без NgModule
  imports: [TaskItem],         // что нужно шаблону для работы
  templateUrl: './task-list.html', // путь к шаблону
  styleUrls: ['./task-list.css'],  // путь к стилям
})
export class TaskList {
  tasks: Task[] = [            // данные списка (массив моделей Task)
    { id: 1, title: 'Изучить компоненты', completed: true, priority: 'high' },
    { id: 2, title: 'Связать шаблон', completed: false, priority: 'medium' },
    { id: 3, title: 'Собрать список', completed: false, priority: 'low' },
  ];

  // вычисляемое свойство: сколько задач выполнено (filter из урока 2)
  get completedCount(): number {
    return this.tasks.filter(t => t.completed).length;
  }
}

<!-- task-list.html — шаблон компонента (src/app/task-list.html) -->
<h2>Мои задачи</h2>
<!-- интерполяция: подставляем значения из класса (completedCount, tasks.length) -->
<p>Выполнено: {{ completedCount }} из {{ tasks.length }}</p>

<!-- @if/@else: показать список ИЛИ сообщение, когда пусто -->
@if (tasks.length > 0) {
  <ul>
    <!-- @for: для каждой задачи; track task.id — стабильный ключ для Angular -->
    @for (task of tasks; track task.id) {
      <!-- [task]="task": передаём объект задачи в дочерний компонент -->
      <li><app-task-item [task]="task" /></li>
    }
  </ul>
} @else {
  <p>Пока нет задач — добавьте первую.</p>
}

Обратите внимание:

• @if показывает либо список, либо сообщение;
• @for перебирает задачи;
• [task]="task" передаёт объект задачи в дочерний компонент;
• completedCount — вычисляемое значение через filter() из урока 2.

18. Сравнение с будущим React: map() и key

Мы будем изучать React со второй половины курса. Полезно уже сейчас провести параллель, как это делалось в уроке 1 (раздел 24).

В Angular список строится через @for ... track. В React — через JavaScript-метод map() с атрибутом key:

// React (позже в курсе)
<ul>
  {tasks.map(task => (
    <TaskItem key={task.id} task={task} />
  ))}
</ul>

19. Компонентная композиция: дерево TaskFlow

Большой экран собирается из маленьких компонентов. Это и есть композиция — принцип, который мы разбирали для React в уроке 1 (раздел 23), но он в равной мере относится к Angular.

Компонент решает одну задачу. TaskItem показывает одну задачу, FilterBar — фильтры, TaskForm — создание. Это делает код читаемым и переиспользуемым.

Почему так важно делить экран на компоненты?

• Читаемость. Каждый файл короткий и решает одну задачу.
• Переиспользование. TaskItem можно показать в списке, в поиске, в отчёте.
• Тестируемость. Маленький компонент проще протестировать изолированно.
• Сопровождение. Изменение поведения одной части не ломает остальное.

Композиция — общая идея и для Angular, и для React. В Angular связь между компонентами задаётся декораторами и шаблоном, в React — props и callbacks, но принцип «один компонент — одна ответственность» одинаков.

20. Передача данных вниз: input()

Чтобы дочерний компонент получил данные, родитель передаёт их через property binding, а дочерний объявляет вход через функцию input().

Контекст. В TaskFlow родитель TaskList передаёт каждой карточке TaskItem объект задачи именно так.

// task-item.ts — дочерний компонент (src/app/task-item/task-item.ts)
import { Component, input } from '@angular/core';
import type { Task } from '../task';          // тип модели задачи

@Component({
  selector: 'app-task-item',                  // тег <app-task-item>
  standalone: true,                           // современный компонент
  templateUrl: './task-item.html',            // его шаблон
})
export class TaskItem {
  // input.required — ОБЯЗАТЕЛЬНЫЙ вход: родитель должен передать task,
  // иначе Angular выдаст ошибку. В шаблоне читаем как task().title
  readonly task = input.required<Task>();
}

Форма входа:

• input.required<Task>() — обязательный вход;
• input<Task>() — необязательный вход (может не передаваться);
• input('default', { alias: 'x' }) — со значением по умолчанию и псевдонимом.

В шаблоне читаем через вызов: task().title. В классе — this.task().

<div>
  <input type="checkbox" [checked]="task().completed" />
  <span>{{ task().title }}</span>
</div>

Родитель передаёт значение:

@for (task of tasks; track task.id) {
  <app-task-item [task]="task" />
}

21. Сигналы: читать состояние в шаблоне

В уроке 1 (раздел 40) мы встретились с signal() и update(). Сигнал — реактивное значение: когда оно меняется, Angular перерисовывает те места шаблона, которые его читают.

Контекст. В TaskFlow сигнал tasks хранит список; когда мы добавляем задачу, шаблон сам показывает её — перерисовывать вручную не надо.

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-task-page',
  standalone: true,
  // шаблон задан прямо в классе через template (вместо отдельного файла)
  template: `
    <p>Всего задач: {{ tasks().length }}</p>
    <p>Выполнено: {{ completedCount() }}</p>
  `,
})
export class TaskPage {
  // signal — реактивное значение. tasks() возвращает ТЕКУЩИЙ массив,
  // и Angular перерисовывает шаблон, когда значение меняется
  readonly tasks = signal<Task[]>([
    { id: 1, title: 'Изучить Angular', completed: true, priority: 'high' },
  ]);

  // метод читает сигнал через tasks() и вычисляет производное значение
  completedCount() {
    return this.tasks().filter(t => t.completed).length;
  }
}

Разница между геттером и функцией для вычисляемого значения: сигналы читаются как функции. Для производных значений, которые зависят от сигналов и кэшируются, Angular предлагает computed() — его вы подробно изучите в уроке 5. На этом уроке достаточно прямого чтения сигналов в шаблоне.

22. Стили компонента: encapsulation

По умолчанию стили компонента изолированы: классы внутри одного компонента не «протекают» в другие. Это называется view encapsulation.

/* task-item.css */
.done span { text-decoration: line-through; color: gray; }
.urgent { color: #d97706; font-weight: bold; }

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

@Component({
  selector: 'app-task-item',
  standalone: true,
  encapsulation: ViewEncapsulation.None, // обычно не нужно
})
export class TaskItem { }

Иногда нужно, чтобы стиль родителя влиял на дочерний элемент сквозь границу компонента. Для этого Angular даёт конструкцию ::ng-deep, но её чрезмерное использование разрушает изоляцию. Придерживайтесь правила: минимальное количество ::ng-deep, лучше — передача входных данных и стилизация внутри самого компонента.

Для корректной вёрстки с внешними утилитами (например, CSS-фреймворками) удобнее глобальные классы в styles.css — они доступны везде и не требуют ::ng-deep.

Чтобы стилизовать элемент дочернего компонента из родителя, Angular предоставляет псевдокласс :host и :host-context. Базовое правило — стилизовать собственные элементы компонента, а «сквозные» состояния (например, зачёркивание выполненных задач) держать внутри своего же компонента.

23. Обработка ошибок в шаблоне: null, undefined, optional chaining

Данные могут быть null или undefined — особенно когда они приходят от API. Обращение к свойству такого значения вызывает ошибку. В шаблоне защищаемся оператором необязательности ?.

@if (task) {
  <p>{{ task.title }}</p>
}

<p>{{ task?.title }}</p>
<p>{{ task?.dueDate?.toLocaleDateString() ?? 'без срока' }}</p>

?. возвращает undefined вместо ошибки, если промежуточное значение пустое. ?? даёт запасное значение, когда слева null/undefined.

Частый паттерн — проверка наличия до рендера списка:

@if (tasks) {
  @if (tasks.length === 0) {
    <p>Список пуст</p>
  } @else {
    @for (task of tasks; track task.id) {
      <app-task-item [task]="task" />
    }
  }
} @else {
  <p>Данные ещё не загружены</p>
}

24. Практика 1: компонент TaskItem

Создадим компонент одной задачи. Он получает объект Task и показывает заголовок, чекбокс и приоритет.

ng generate component task-item

// task-item.ts
import { Component, input } from '@angular/core';
import type { Task } from '../task';

@Component({
  selector: 'app-task-item',
  standalone: true,
  templateUrl: './task-item.html',
  styleUrls: ['./task-item.css'],
})
export class TaskItem {
  readonly task = input.required<Task>();
}

<!-- task-item.html -->
<div class="task-item" [class.done]="task().completed">
  <input
    type="checkbox"
    [checked]="task().completed"
    [attr.aria-label]="'Отметить: ' + task().title"
  />
  <span>{{ task().title }}</span>
  @switch (task().priority) {
    @case ('high')   { <em>Срочно</em> }
    @case ('medium') { <em>Средне</em> }
    @default         { <em>Не срочно</em> }
  }
</div>

/* task-item.css */
.task-item { display: flex; gap: 0.5rem; align-items: center; }
.done span { text-decoration: line-through; color: gray; }
em { font-style: normal; margin-left: 0.4rem; color: #d97706; }

25. Практика 2: компонент TaskList

TaskList владеет данными и собирает экран. Он импортирует дочерние компоненты и связывает их.

ng generate component task-list

// task-list.ts
import { Component, signal } from '@angular/core';
import { TaskItem } from '../task-item/task-item';
import type { Task } from '../task';

@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [TaskItem],
  templateUrl: './task-list.html',
  styleUrls: ['./task-list.css'],
})
export class TaskList {
  readonly tasks = signal<Task[]>([
    { id: 1, title: 'Изучить компоненты', completed: true, priority: 'high' },
    { id: 2, title: 'Связать шаблон', completed: false, priority: 'medium' },
    { id: 3, title: 'Собрать список', completed: false, priority: 'low' },
  ]);

  completedCount() {
    return this.tasks().filter(t => t.completed).length;
  }

  activeCount() {
    return this.tasks().filter(t => !t.completed).length;
  }
}

<!-- task-list.html -->
<section>
  <h2>Мои задачи</h2>
  <p>Выполнено {{ completedCount() }} из {{ tasks().length }}</p>

  @if (tasks().length > 0) {
    <ul>
      @for (task of tasks(); track task.id) {
        <li>
          <app-task-item [task]="task" />
        </li>
      }
    </ul>
  } @else {
    <p>Пока нет задач — добавьте первую.</p>
  }
</section>

Здесь tasks — сигнал, поэтому в шаблоне читаем как tasks(). Заметьте: @for (... of tasks()) — итерация по текущему значению сигнала.

26. Практика 3: FilterBar со статусами

FilterBar показывает кнопки фильтров. Выбранный фильтр хранится в типе TaskFilter — union literal types из урока 2 (разделы 31–32).

// filter-bar.ts
import { Component, signal } from '@angular/core';

export type TaskFilter = 'all' | 'active' | 'done';

@Component({
  selector: 'app-filter-bar',
  standalone: true,
  templateUrl: './filter-bar.html',
  styleUrls: ['./filter-bar.css'],
})
export class FilterBar {
  readonly filter = signal<TaskFilter>('all');
  counts = { all: 3, active: 2, done: 1 };

  setFilter(value: TaskFilter) {
    this.filter.set(value);
  }
}

<div class="filters">
  <button
    (click)="setFilter('all')"
    [class.active]="filter() === 'all'"
  >Все ({{ counts.all }})</button>
  <button
    (click)="setFilter('active')"
    [class.active]="filter() === 'active'"
  >Активные ({{ counts.active }})</button>
  <button
    (click)="setFilter('done')"
    [class.active]="filter() === 'done'"
  >Выполненные ({{ counts.done }})</button>
</div>

/* filter-bar.css */
.filters { display: flex; gap: 0.5rem; margin: 1rem 0; }
button { border: 1px solid var(--line); background: var(--card); padding: 0.4rem 0.9rem; cursor: pointer; border-radius: 8px; }
button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

Здесь состояние «какой фильтр выбран» хранится в сигнале, а [class.active] подсвечивает нужную кнопку. Обратите внимание на используемый тип TaskFilter: он ограничивает допустимые значения — это польза literal types.

27. Практика 4: StatsBar со счётчиками

StatsBar показывает статистику: сколько всего, активных, выполненных. Это упражнение на вычисляемые значения и их вывод в шаблон.

// stats-bar.ts
import { Component, input } from '@angular/core';
import type { Task } from '../task';

@Component({
  selector: 'app-stats-bar',
  standalone: true,
  templateUrl: './stats-bar.html',
  styleUrls: ['./stats-bar.css'],
})
export class StatsBar {
  readonly tasks = input.required<Task[]>();

  done() {
    return this.tasks().filter(t => t.completed).length;
  }

  active() {
    return this.tasks().filter(t => !t.completed).length;
  }
}

<div class="stats">
  <span>Всего: {{ tasks().length }}</span>
  <span>Активных: {{ active() }}</span>
  <span>Выполнено: {{ done() }}</span>
</div>

/* stats-bar.css */
.stats { display: flex; gap: 1rem; color: var(--muted); margin-bottom: 0.5rem; }

StatsBar получает массив через input() и сам вычисляет производные значения методами. Такой компонент переиспользуем: он не знает, откуда пришли задачи.

28. Практика 5: форма-заглушка TaskForm

Полноценные формы Angular разберём в уроке 8. Здесь — заглушка, которая используется для построения структуры экрана и обработки события submit.

// task-form.ts — компонент формы (src/app/task-form/task-form.ts)
import { Component, output } from '@angular/core';  // output — исходящее событие

@Component({
  selector: 'app-task-form',
  standalone: true,
  templateUrl: './task-form.html',
  styleUrls: ['./task-form.css'],
})
export class TaskForm {
  newTitle = '';                       // текущее значение поля ввода

  // output — компонент СООБЩАЕТ родителю строку (название задачи).
  // Родитель ловит её через (created)="onCreate($event)"
  readonly created = output<string>();

  // событие ввода: берём значение из поля и кладём в newTitle
  onInput(event: Event) {
    this.newTitle = (event.target as HTMLInputElement).value;
  }

  submit() {
    if (this.newTitle.trim() === '') {
      return; // guard clause
    }
    this.created.emit(this.newTitle.trim());
    this.newTitle = '';
  }
}

<form (submit)="submit()">
  <input
    [value]="newTitle"
    (input)="onInput($event)"
    placeholder="Название новой задачи"
    aria-label="Название задачи"
  />
  <button type="submit" [disabled]="newTitle.trim() === ''">
    Добавить
  </button>
</form>

28.1. Атрибут vs свойство DOM: когда [attr.*]

Мы уже упомянули различие между HTML-атрибутом и свойством DOM. Разберём это подробнее, потому что от него зависят некоторые биндинги.

• Атрибут — то, что написано в разметке: <input value="текст">.
• Свойство — текущее значение элемента в памяти браузера: input.value.

После загрузки страницы атрибут и свойство связаны, но при взаимодействии пользователя они могут разойтись. Angular через [ ] работает преимущественно со свойствами, а через [attr.имя] — с атрибутами.

<!-- привязка к свойству (обычный случай) -->
<input [value]="title" />

<!-- привязка к атрибуту (редкий случай) -->
<td [attr.colspan]="colspan">...</td>
<input [attr.aria-label]="labelText" />

Где нужен атрибут, а не свойство?

28.2. Шаблонные ссылки #ref и их назначение

Шаблонная ссылка #имя даёт имя элементу в шаблоне, чтобы обращаться к нему в другом месте этого же шаблона.

<input #titleInput (input)="onChange(titleInput.value)" />

Здесь #titleInput — ссылка на элемент, а titleInput.value читает его значение без обращения к $event.

Шаблонные ссылки полезны, когда нужно:

• получить значение поля без чтения $event.target;
• обратиться к компоненту или директиве по ссылке;
• сделать локальную переменную в шаблоне.

<form>
  <input #t (input)="onChange(t.value)" placeholder="Задача" />
  <button (click)="add(t.value)">Добавить</button>
</form>

28.3. Связывание TaskForm с TaskList

Мы разобрали компоненты по отдельности. Теперь соединим их так, чтобы данные и события двигались в нужном направлении.

Задача: TaskForm собирает название, TaskList владеет массивом задач. Когда пользователь добавляет задачу, TaskForm сообщает об этом наверх, а TaskList добавляет запись.

Схема принципов единая для всего курса: данные вниз, события вверх. Событие (created) идёт вверх к владельцу данных; владелец меняет состояние; шаблон показывает новое состояние.

28.4. Практика 6: интерактивное добавление задачи

Соединим TaskForm и TaskList. TaskList слушает событие created и добавляет задачу в сигнал.

// task-list.ts (обновлённый)
import { Component, signal } from '@angular/core';
import { TaskItem } from '../task-item/task-item';
import { TaskForm } from '../task-form/task-form';
import type { Task } from '../task';

@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [TaskItem, TaskForm],
  templateUrl: './task-list.html',
})
export class TaskList {
  readonly tasks = signal<Task[]>([
    { id: 1, title: 'Изучить компоненты', completed: true, priority: 'high' },
  ]);

  onCreated(title: string) {
    const id = Math.max(0, ...this.tasks().map(t => t.id)) + 1;
    const task: Task = { id, title, completed: false, priority: 'low' };
    this.tasks.update(current => [task, ...current]);
  }
}

<!-- task-list.html (обновлённый) -->
<section>
  <h2>Мои задачи</h2>
  <app-task-form (created)="onCreated($event)" />

  @if (tasks().length > 0) {
    <ul>
      @for (task of tasks(); track task.id) {
        <li><app-task-item [task]="task" /></li>
      }
    </ul>
  } @else {
    <p>Пока нет задач.</p>
  }
</section>

Что здесь важно:

• Math.max(0, ...tasks().map(t => t.id)) + 1 — вычисляем следующий id через map и spread (урок 2, разделы 9 и 12);
• tasks.update(...) — обновляем сигнал, создавая новый массив с префиксом новой задачи;
• шаблон сам перерисует список — ничего вручную менять не надо.

28.5. Работа с вложенными данными в шаблоне

Данные задач часто бывают вложенными: у задачи есть свойства, внутри массивы, внутри объектов. Разберём вывод таких структур.

export interface Task {
  id: number;
  title: string;
  completed: boolean;
  tags?: string[];
  assigned?: { name: string; role: string } | null;
}

Вывод тегов — вложенный @for:

@if (task().tags && task().tags.length) {
  <ul class="tags">
    @for (tag of task().tags; track tag) {
      <li>{{ tag }}</li>
    }
  </ul>
}

Вывод вложенного объекта с проверкой на null:

@if (task().assigned) {
  <p>Ответственный: {{ task().assigned!.name }}
     ({{ task().assigned!.role }})</p>
} @else {
  <p>Не назначено</p>
}

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

28.6. Классы и стили: расширенные приёмы

Мы разобрали [class.имя] и [class] с объектом. Покажем ещё несколько удобных приёмов, которые пригодятся в TaskFlow.

Строковая привязка классов

// в классе
get itemClass(): string {
  const parts = ['task-item'];
  if (this.task().completed) parts.push('done');
  if (this.task().priority === 'high') parts.push('urgent');
  return parts.join(' ');
}

<div [class]="itemClass">...</div>

Условные стили по состоянию

<span
  [style.color]="task().completed ? 'gray' : 'var(--ink)'"
  [style.font-weight]="task().priority === 'high' ? 'bold' : 'normal'"
>{{ task().title }}</span>

Стили через объект

<div [style]="{
  'border-left': task().priority === 'high' ? '4px solid #d97706' : 'none',
  'opacity': task().completed ? 0.6 : 1
}">...</div>

28.7. Доступность (a11y) в шаблонах

В уроке 1 (раздел 28) мы поговорили о доступности. В шаблонах Angular это выражается через правильные атрибуты и связывание с состоянием.

ARIA и состояние

<button
  [attr.aria-pressed]="filter() === 'all'"
  (click)="setFilter('all')"
>Все</button>

aria-pressed сообщает скринридеру, выбрана ли «нажатая» кнопка фильтра. Оно меняется вместе с состоянием.

Роль списка и элементов

<ul role="list">
  @for (task of tasks(); track task.id) {
    <li role="listitem">
      <input type="checkbox"
             [checked]="task.completed"
             [attr.aria-label]="'Задача: ' + task.title" />
    </li>
  }
</ul>

Фокус при изменении содержания

Когда список меняется (добавилась задача), важно, чтобы пользователь с клавиатуры получал обратную связь. Простая забота — сообщение после действия:

<p aria-live="polite">{{ notice }}</p>

aria-live="polite" заставляет скринридер озвучивать изменения, даже если пользователь не сфокусирован на элементе.

28.8. Практика 7: завершаем мастер-шаблон

Соберём весь экран из практик 1–6 в единый компонент TaskList, добавив статистику и фильтры. Это упражнение — «скелет» будущего TaskFlow, который мы наполним сервисами в уроках 6–7.

// task-list.ts (финальная версия урока)
import { Component, signal } from '@angular/core';
import { TaskItem } from '../task-item/task-item';
import { TaskForm } from '../task-form/task-form';
import { FilterBar, type TaskFilter } from '../filter-bar/filter-bar';
import { StatsBar } from '../stats-bar/stats-bar';
import type { Task } from '../task';

@Component({
  selector: 'app-task-list',
  standalone: true,
  imports: [TaskItem, TaskForm, FilterBar, StatsBar],
  templateUrl: './task-list.html',
  styleUrls: ['./task-list.css'],
})
export class TaskList {
  readonly tasks = signal<Task[]>([
    { id: 1, title: 'Изучить компоненты', completed: true, priority: 'high' },
    { id: 2, title: 'Связать шаблон', completed: false, priority: 'medium' },
    { id: 3, title: 'Собрать список', completed: false, priority: 'low' },
  ]);

  readonly filter = signal<TaskFilter>('all');

  visibleTasks() {
    const f = this.filter();
    switch (f) {
      case 'done': return this.tasks().filter(t => t.completed);
      case 'active': return this.tasks().filter(t => !t.completed);
      default: return this.tasks();
    }
  }

  setFilter(value: TaskFilter) {
    this.filter.set(value);
  }

  onCreated(title: string) {
    const id = Math.max(0, ...this.tasks().map(t => t.id)) + 1;
    const task: Task = { id, title, completed: false, priority: 'low' };
    this.tasks.update(current => [task, ...current]);
  }
}

<!-- task-list.html (финал) -->
<section class="page">
  <header>
    <h2>Мои задачи</h2>
    <app-stats-bar [tasks]="tasks()" />
  </header>

  <app-task-form (created)="onCreated($event)" />
  <app-filter-bar [filter]="filter()" (filterChange)="setFilter($event)" />

  @if (visibleTasks().length > 0) {
    <ul>
      @for (task of visibleTasks(); track task.id) {
        <li>
          <app-task-item [task]="task" />
        </li>
      }
    </ul>
  } @else {
    <p class="empty">Подходящих задач нет.</p>
  }
</section>

Обратите внимание на метод visibleTasks(): он применяет filter() из урока 2 по выбранному фильтру. Здесь мы уже передаём фильтр вниз ([filter]) и получаем изменение вверх ((filterChange)) — полный цикл связи компонентов, который подробно разберём в уроке 4.

28.9. Производительность шаблонов: track, @defer, простые выражения

Шаблон выполняется Angular многократно. Правильное написание выражений влияет на скорость. Разберём три важные практики.

track для минимума перерисовок

Без track Angular по умолчанию сравнивает элементы по ссылке; при каждом обновлении массива список может перерисовываться целиком. Со стабильным track task.id Angular переиспользует элементы и обновляет только изменённые.

@for (task of tasks(); track task.id) {
  <app-task-item [task]="task" />
}

Вызовы методов в шаблоне

Каждый вызов {{ someMethod() }} происходит при проверке изменений. Тяжёлые операции в методе замедляют рендер. Убирайте вычисления из шаблона и переиспользуйте результаты.

// плохо: метод фильтрует массив на каждый рендер
<!-- {{ filterTasks() }} -->

// лучше: сигнал или computed с кэшем (разберём в уроке 5)
readonly visible = computed(() => this.tasks().filter(t => !t.completed));

Отложенная загрузка тяжёлых частей

Блок @defer откладывает создание части шаблона до события или появления в зоне видимости. Это удобно для больших, невидимых сразу блоков.

@defer (on viewport) {
  <app-export-panel [tasks]="tasks()" />
} @placeholder {
  <p>Панель экспорта появится при прокрутке</p>
}

28.10. Таблица-шпаргалка биндингов и control flow

Сведём все конструкции урока в одну справочную таблицу. Она пригодится как конспект.

28.11. Практика 8: отметка задачи выполненной

Сделаем чекбокс рабочим: отметка меняет состояние задачи. Так мы свяжем событие и обновление сигнала — сердце интерактивности.

// task-list.ts (добавляем метод)
toggle(taskId: number) {
  this.tasks.update(current =>
    current.map(t =>
      t.id === taskId ? { ...t, completed: !t.completed } : t
    )
  );
}

Метод использует три важные конструкции из урока 2:

• update() — замена значения сигнала новым массивом;
• map() — преобразование элементов (раздел 9);
• { ...t, completed: !t.completed } — новая копия объекта через spread (раздел 12), чтобы не мутировать исходный.

Теперь TaskItem должен сообщить о клике наверх.

// task-item.ts (добавляем выход)
export class TaskItem {
  readonly task = input.required<Task>();
  readonly toggled = output<void>();

  toggle() {
    this.toggled.emit();
  }
}

<!-- task-item.html -->
<div class="task-item" [class.done]="task().completed">
  <input
    type="checkbox"
    [checked]="task().completed"
    (change)="toggle()"
    [attr.aria-label]="'Отметить: ' + task().title"
  />
  <span>{{ task().title }}</span>
</div>

<!-- task-list.html (слушаем событие) -->
@for (task of visibleTasks(); track task.id) {
  <li>
    <app-task-item
      [task]="task"
      (toggled)="toggle(task.id)"
    />
  </li>
}

Полный цикл:

1. пользователь кликает чекбокс;
2. Angular вызывает toggle() внутри TaskItem;
3. TaskItem испускает событие toggled;
4. TaskList ловит его и вызывает toggle(task.id);
5. сигнал обновляется новым массивом;
6. шаблон перерисовывает задачу зачёркнутой.

29. Самостоятельная работа

Шесть заданий. Сначала попробуйте сами, затем сверьтесь с подсказками в разделе 30.

30. Подсказки к самостоятельной работе

Совет: сначала сравните свою идею с требованием, а потом уже открывайте код.

31. Частые ошибки и как их читать

Понимание текста ошибки ускоряет работу. Разберём типичные ситуации.

Мини-пример: читаем ошибку компилятора

NG0302: Can't bind to 'completed' since it isn't a known
property of 'app-task-item'.

1. If 'app-task-item' is an Angular component and it has
   'completed' input, then verify that it is part of this
   module. 
2. ... If 'app-task-item' is a Web Component then add
   'CUSTOM_ELEMENTS_SCHEMA' ...

Что здесь произошло: мы попытались передать [completed], но TaskItem не объявляет такого входа. Решение — либо объявить вход через input(), либо исправить имя свойства. Angular подсказывает возможные причины — читайте их, а не переписывайте всё «вслепую».

32. Резюме: что мы построили

За этот урок мы прошли путь от одного компонента до маленького интерфейса TaskFlow:

Этот урок — фундамент шаблонов Angular. С ним вы сможете читать и писать компоненты, связывать данные через биндинги, строить условную разметку и списки, а также собирать экран из нескольких компонентов.

• поняли структуру standalone-компонента;
• научились показывать данные ({{ }}, [ ]) и реагировать на события (( ));
• освоили условную разметку, списки и переключатели (@if, @for, @switch);
• описали модель Task и связали её с шаблоном;
• построили компоненты TaskItem, TaskList, FilterBar, StatsBar и форму-заглушку;
• узнали про сигналы, входы input() и события output().

33. Контрольные вопросы

1. Из каких трёх частей состоит компонент Angular?
2. Что делает selector в @Component?
3. Чем интерполяция {{ }} отличается от property binding [ ]?
4. Какое направление связи реализует event binding ( )?
5. Зачем в @for нужен track?
6. Чем блок @empty отличается от состояния «список не загружен»?
7. Когда лучше применять @switch, а когда @if/@else?
8. Почему в шаблоне нельзя использовать стрелочную функцию как обработчик?
9. Как добавить CSS-класс только при истинном условии?
10. Для чего нужен оператор ?. и ?? в шаблоне?
11. Как объявить обязательный вход у компонента?
12. Что означает «стили компонента изолированы»?

34. Мини-словарь

35. Источники и продолжение

Для самостоятельного углубления:

• Официальная документация Angular: компоненты, шаблоны, control flow.
• Гайд по signals и входным сигналам в документации Angular.
• Справочник по синтаксису шаблонов (Template syntax).
• Материалы урока 1 (разделы 20–24) и урока 2 (разделы 40–47) этого курса.

36. Чек-лист урока

• Я могу создать standalone-компонент через CLI и через код.
• Я использую интерполяцию, property и event binding без ошибок.
• Я строю условную разметку через @if/@else и @switch.
• Я вывожу списки через @for с track и @empty.
• Я связываю классы CSS с состоянием через [class.*].
• Я понимаю разницу направлений [ ] и ( ).
• Я умею объявлять вход input() и читать сигнал в шаблоне.
• Я обрабатываю пустые значения через ?. и ??.
• Я могу собрать экран из нескольких компонентов (TaskItem, TaskList, FilterBar, StatsBar).

🛠 Практика к уроку 3

Закрепите материал: соберите экран списка задач из компонентов.

Задание 1. Компонент TaskItem

Создайте standalone-компонент, получающий задачу через вход:

@Component({
  selector: 'app-task-item',
  standalone: true,
  template: `<li [class.done]="task().completed">{{ task().title }}</li>`
})
export class TaskItem {
  task = input.required<Task>();
}

Задание 2. Список через @for и @empty

@for (task of tasks(); track task.id) {
  <app-task-item [task]="task" />
} @empty {
  <p>Задач пока нет.</p>
}