📘 Разбор опроса | Change Detection

❓ Вопрос
Как вручную запустить проверку изменений в OnPush компоненте?

✅ Ответ
ChangeDetectorRef.detectChanges()

💡 Почему это важно
Стратегия OnPush проверяет изменения только при:
• изменении @Input
• событиях внутри компонента

Если данные обновляются вне стандартного потока — нужно вручную триггерить проверку через detectChanges().

⚠️ Ловушка
NgZone.run() ≠ detectChanges()
Он запускает код внутри зоны Angular, но не гарантирует обновление конкретного компонента.

🛠 Практика
Используй detectChanges() для точечных обновлений в OnPush компонентах — это помогает избежать лишних перерендеров.

📚 Больше 4000 вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Как реализовать динамическую форму с использованием FormArray, с возможностью добавлять и удалять элементы? Какие вопросы стоит учесть по UX при работе с такими формами?

✅ Ответ

Динамическая форма с FormArray реализуется путем создания массива контролов, который можно программно расширять или сокращать через методы push() и removeAt(). Каждый элемент FormArray представляет собой отдельный контрол или группу контролов, что позволяет гибко управлять структурой формы. При работе с такими формами важно учитывать UX, обеспечивая понятные кнопки добавления и удаления элементов, подтверждение удаления для предотвращения случайных действий, а также отображение ошибок валидации непосредственно возле изменяемых полей для своевременной обратной связи.

#lexicon #собеседование #angular #senior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #middle #advanced

📘 Разбор опроса\n\nБезопасность конфигураций CI/CD\n\n❓ Вопрос\n\nБезопасное управление секретами в конфигурациях окружений\n\n✅ Ответ\n\nИспользование переменных окружения CI/CD системы\n\n💡 Почему\n\nCI/CD системы предоставляют защищенные хранилища для секретов, которые не попадают в репозиторий и доступны только во время сборки.\n\n⚠️ Ловушка\n\nХранение секретов в репозитории, даже зашифрованных, создает риски утечки при доступе к истории коммитов.\n\n🛠 Практика\n\nИспользуйте environment variables в GitHub Actions, GitLab CI или аналогичных системах для хранения API ключей и токенов.\n\n📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #middle

📘 Разбор опроса

🧩 Валидация в компонентном обмене

❓ Вопрос: Где делать валидацию при @Input/@Output?

✅ Правильный ответ: В дочернем компоненте

💡 Почему: @Input передает данные в дочерний компонент, где их нужно проверить. @Output отправляет данные наружу, поэтому валидация должна быть выполнена до эмита события. Это сохраняет инкапсуляцию логики компонента.

⚠️ Где ошибаются: Попытка валидировать в родителе нарушает принцип единственной ответственности и усложняет поддержку.

🛠 На практике: В дочернем компоненте: validateData() перед this.dataChange.emit(value);

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #frontend

📘 Разбор опроса

🧩 Делегирование событий и производительность DOM

❓ Вопрос: Как делегирование событий влияет на производительность при множестве элементов?

✅ Правильный ответ: Уменьшает количество обработчиков, используя всплытие

💡 Почему: Делегирование назначает один обработчик на общего родителя, который перехватывает события дочерних элементов через механизм всплытия. Это сокращает количество обработчиков в DOM, снижая нагрузку на память и улучшая произ...

⚠️ Где ошибаются: Думать, что нужно создавать отдельный обработчик для каждого элемента или отключать всплытие.

🛠 На практике: В Angular используйте (click) на родительском элементе с проверкой target, например: (click)="onClick($event)" в шаблоне.

📚 4000+ вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Расскажите, как вы реализуете side effects в NgRx. Какие инструменты и подходы применяете для управления асинхронными запросами?

✅ Ответ

Для реализации побочных эффектов в NgRx применяется библиотека @ngrx/effects, которая позволяет слушать экшены и выполнять асинхронные операции, такие как HTTP-запросы. Реализуются эффекты с помощью операторов RxJS, например switchMap для отмены предыдущих запросов и catchError для обработки ошибок. Важно разделять чистую логику редьюсеров и side effects, обеспечивая предсказуемость и поддерживаемость состояния.

#lexicon #собеседование #angular #middle

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #frontend

📘 Разбор опроса

🧩 Оптимизация обработки событий

❓ Вопрос: Какой метод лучше ускоряет отклик на частые события?

✅ Правильный ответ: Дебаунсинг обработчиков событий

💡 Почему: Дебаунсинг группирует множественные вызовы в один, уменьшая нагрузку на обработку и ускоряя реакцию интерфейса.

⚠️ Где ошибаются: Путать с ленивой загрузкой, которая оптимизирует загрузку, а не обработку событий.

🛠 На практике: Используй RxJS debounceTime() для обработки ввода в поиске.

📚 4000+ вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Опишите, как можно реализовать вкладочную навигацию с сохранением состояния табов в URL с помощью Angular Router. Какая конфигурация маршрутов для этого требуется и какие преимущества такой подход даёт?

✅ Ответ

Для реализации вкладочной навигации с сохранением состояния в URL используется Angular Router с настройкой дочерних маршрутов (children), соответствующих каждому табу. В конфигурации маршрутов каждый таб представлен как отдельный путь внутри родительского маршрута, что позволяет менять часть URL при переключении табов без полной перезагрузки страницы. При выборе таба происходит навигация с помощью routerLink или программного вызова navigate, обновляющего URL. Такой подход обеспечивает сохранение состояния при обновлении страницы, возможность прямого перехода к конкретному табу по ссылке и улучшает поддержку истории браузера.

#lexicon #собеседование #angular #senior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #babel

📘 Разбор опроса

🧩 Роль Babel в Angular

❓ Вопрос: Основная задача Babel в Angular?

✅ Правильный ответ: Транспиляция ES6+ в ES5 для совместимости

💡 Почему: Babel преобразует современный JavaScript (ES6+) в ES5, чтобы код работал в старых браузерах. Angular CLI использует его для обеспечения кросс-браузерной совместимости.

⚠️ Где ошибаются: Путать Babel с Webpack: минификацию и сборку делает Webpack, а не Babel.

🛠 На практике: В angular.json: "browserTarget": "your-project:build" включает транспиляцию через Babel.

📚 4000+ вопросов для подготовки к IT-собеседованиям