Lexicon | Angular вопросы
19 subscribers
15 photos
15 links
Подготовка к собеседованиям для Angular разработчиков.

Публикуем вопросы и разборы задач, которые встречаются на интервью frontend разработчиков. Подходит для подготовки к позициям от junior до senior.

Новые вопросы выходят регулярно.
Download Telegram
Lexicon | Angular вопросы
📘 Разбор опроса

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

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

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

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

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

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

📚 4000+ вопросов для подготовки к IT-собеседованиям
Lexicon | Angular вопросы
🧠 Делегирование событий в Angular: производительность DOM
📘 Разбор опроса

🧩 Делегирование событий и производительность 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-собеседованиям
Lexicon | Angular вопросы
🧠 Оптимизация отклика UI: ленивая загрузка vs дебаунсинг
📘 Разбор опроса

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

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

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

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

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

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

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

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

Ответ

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

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

📚 4000+ вопросов для подготовки к IT-собеседованиям
Lexicon | Angular вопросы
🧠 Babel в Angular: зачем нужен и что делает?
📘 Разбор опроса

🧩 Роль 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-собеседованиям