Компоненты

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

Класс компонента

В прошлом уроке команда ng generate component todo-list создала файл src/app/todo-list/todo-list.ts:

// src/app/todo-list/todo-list.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-todo-list',
  imports: [],
  templateUrl: './todo-list.html',
  styleUrl: './todo-list.css',
})
export class TodoList {
  title = 'Мои задачи';
}

Декоратор @Component описывает компонент, а класс хранит его данные и методы. Поле title доступно в шаблоне.

Все компоненты в современном Angular автономные (standalone): каждый сам перечисляет, что ему нужно, в imports.

Шаблон

Шаблон — это HTML компонента:

<!-- src/app/todo-list/todo-list.html -->
<section>
  <h2>{{ title }}</h2>
  <p>Задач пока нет.</p>
</section>

Двойные фигурные скобки выводят значение поля класса — подробнее о них в следующем уроке.

Стили

/* src/app/todo-list/todo-list.css */
section {
  max-width: 400px;
  padding: 16px;
  border: 1px solid #ddd;
}

Стили компонента действуют только на его шаблон. Правило для section не затронет другие секции на странице.

Как вывести компонент

Компонент TodoList появится на странице, только если его тег есть в шаблоне другого компонента. Подключите его в App:

// src/app/app.ts
import { Component } from '@angular/core';
import { TodoList } from './todo-list/todo-list';
 
@Component({
  selector: 'app-root',
  imports: [TodoList],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

<!-- src/app/app.html -->
<h1>Список дел</h1>
<app-todo-list />

Откройте http://localhost:4200: под заголовком появится рамка с текстом «Мои задачи» и «Задач пока нет.» Тег можно писать самозакрывающимся, как здесь.

Встроенный шаблон

Короткий шаблон можно написать прямо в декораторе — свойство template вместо templateUrl, и styles вместо styleUrl:

// src/app/badge/badge.ts
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-badge',
  template: `<span class="badge">новое</span>`,
  styles: `.badge { color: green; }`,
})
export class Badge {}

Такой вариант удобен для маленьких компонентов в несколько строк.

Частая ошибка

Если вставить <app-todo-list /> в шаблон, но забыть добавить TodoList в imports, сборка остановится с ошибкой вида 'app-todo-list' is not a known element. Каждый компонент, тег которого стоит в шаблоне, должен быть импортирован в TypeScript и указан в imports.