Вопросы на собеседовании: Angular-разработчик

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

• Шаблон описывает HTML, который отображает Angular.
• Класс хранит данные и методы, доступные этому шаблону.
• Декоратор @Component связывает класс с селектором, шаблоном, стилями и зависимостями.

Декоратор @Component передает Angular метаданные, необходимые для создания и отображения компонента.

• selector определяет компонент в другом шаблоне.
• template или templateUrl задает представление, а styles или styleUrl задает локальные стили.
• imports перечисляет зависимости шаблона для standalone-компонента.

Селектор компонента представляет собой CSS-селектор, по которому Angular находит host-элемент при создании компонента.

• Селектор вроде app-profile используется как HTML-элемент в родительском шаблоне.
• Angular создает экземпляр компонента и отображает его представление внутри найденного host-элемента.
• Уникальный селектор элемента с префиксом помогает избежать конфликтов со стандартными HTML-элементами.

Встроенный шаблон находится в метаданных компонента, а templateUrl указывает на отдельный HTML-файл.

• Свойство template подходит для очень небольшого представления прямо в TypeScript-файле.
• templateUrl отделяет объемную разметку и упрощает ее чтение.
• Оба варианта компилируются как представление компонента и поддерживают одинаковый синтаксис шаблонов Angular.

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

• Интерполяция и привязка свойства читают значения из класса.
• Привязка события может вызвать метод или изменить поле.
• Выражения в шаблоне должны оставаться простыми, потому что Angular вычисляет их при обновлении представления.

Интерполяция выводит строковое значение выражения, заключенного в двойные фигурные скобки.

• Привязка {{ userName }} читает userName из контекста компонента.
• Angular обновляет показанный текст при изменении связанного значения.
• Интерполяция предназначена для текста и строковых привязок, а не для обработки событий.

Привязка свойства передает значение выражения компонента в свойство DOM-элемента, директивы или дочернего компонента.

• Квадратные скобки обозначают целевое свойство, например [disabled]="isSaving".
• Angular сохраняет тип значения выражения, а не превращает все в текст.
• Представление получает новые значения, когда Angular обнаруживает соответствующее изменение состояния.

Привязка свойства обновляет свойство объекта, а привязка атрибута записывает значение HTML-атрибута.

• [value] обращается к текущему свойству value элемента input.
• [attr.aria-label] обращается к атрибуту, у которого может не быть соответствующего DOM-свойства.
• Значение null в привязке атрибута удаляет этот атрибут.

Привязка события выполняет выражение шаблона при возникновении события DOM или компонента.

• Круглые скобки задают событие, например (click)="save()".
• Выражение может вызвать метод компонента или присвоить значение.
• Данные идут от источника события обратно в компонент, а не из компонента в представление.

$event представляет данные события, которые Angular передает обработчику в шаблоне.

• Для обычного события DOM это объект события браузера.
• Для выходного события компонента это значение, переданное при его вызове.
• Шаблон может передать его в типизированный метод компонента для обработки.

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

• Синтаксис [(...)] показывает значение и записывает изменения обратно.
• [(ngModel)] часто синхронизирует элемент формы с полем компонента.
• Это удобно для редактируемых значений, но по сути остается двумя односторонними потоками.

Для [(ngModel)] нужна директива NgModel, которую предоставляет FormsModule из Angular.

• Компонент с standalone: false получает FormsModule через imports своего NgModule.
• Standalone-компонент добавляет FormsModule в собственный imports.
• Внутри формы связанному элементу также нужно имя, чтобы Angular зарегистрировал его.

Они связывают шаблон с компонентом в разных направлениях и служат разным целям.

• Интерполяция выводит выражение как текст.
• Привязка свойства передает типизированное значение из компонента в свойство.
• Привязка события передает данные события из представления или дочернего компонента в обработчик.

*ngIf условно добавляет или удаляет блок шаблона в зависимости от выражения.

• Истинное условие создает блок и его Angular-представление.
• Ложное условие удаляет представление, а не просто скрывает элементы через CSS.
• Современный Angular также предлагает встроенную конструкцию @if, но *ngIf часто встречается в существующих приложениях.

*ngIf может ссылаться на ng-template как на блок для отображения при ложном условии.

• Веткой then служит элемент с *ngIf, если не указан другой шаблон.
• Параметр else ссылается на шаблонную переменную, например else emptyState.
• Сам ng-template не создает видимый элемент-обертку.

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

• Синтаксис let открывает текущий элемент внутри повторяемого шаблона.
• Локальные значения index, first и last описывают каждую итерацию.
• Современный Angular также предлагает встроенную конструкцию @for, а *ngFor по-прежнему широко встречается в коде Angular.

Стабильная идентичность элементов помогает Angular переиспользовать правильные DOM-представления при изменении коллекции.

• Без отдельной настройки *ngFor обычно сравнивает элементы по идентичности объектов.
• Функция trackBy может вернуть стабильный ключ, например ID из базы данных.
• Переиспользование представлений сохраняет состояние элементов и не создает DOM заново без необходимости.

Сокращенная запись каждой структурной директивы разворачивается в отдельный ng-template, поэтому один элемент не может представить два таких преобразования сразу.

• Синтаксис со звездочкой сокращает оборачивание содержимого в шаблон Angular.
• Вложенный ng-container дает отдельную основу для второй директивы.
• Разделение директив также делает порядок их вычисления явным.

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

• Она не определяет отдельное представление, в отличие от компонента.
• Она применяется к своему элементу через селектор атрибута.
• NgClass и NgStyle служат распространенными встроенными примерами.

NgClass добавляет и удаляет CSS-классы элемента в зависимости от выражения шаблона.

• Он принимает строку классов, массив имен классов или объект с условиями.
• Ключи объекта задают имена классов, а истинные значения включают эти классы.
• Прямая привязка [class.active] обычно проще для одного условного класса.