Как выбрать между inline и внешним файлом шаблона?

Коротко

В @Component есть два варианта: template (строка в декораторе) и templateUrl (отдельный .html). Выбор — про читаемость и размер view, а не про «правильность фреймворка».

Когда inline

• Крошечные компоненты (кнопка, бейдж, обёртка).
• Storybook/примеры, где удобно видеть класс и разметку рядом.
• Генераторы CLI для очень простых виджетов.

@Component({
  standalone: true,
  selector: 'app-badge',
  template: `<span class="badge">{{ text() }}</span>`,
})
export class BadgeComponent {
  text = input.required<string>();
}

Когда templateUrl

• Формы, таблицы, страницы с десятками строк разметки.
• Когда над шаблоном работают дизайнеры/верстальщики.
• Когда нужны HTML-подсветка, линтеры и навигация IDE по файлу.

Нюансы

Стили аналогично: styles vs styleUrl/styleUrls. Production-бандл не выигрывает принципиально от одного варианта — решают DX и code review. В команде зафиксируйте правило: например, «больше N строк → внешний файл».

Итог для интервью

Сформулируйте определение, приведите короткий пример кода и назовите типичную ошибку или отличие от соседнего API Angular. Этого обычно достаточно для уверенного middle-ответа и показывает, что вы связываете теорию с практикой проекта.