Иногда нам нужно отреагировать на определенные события в браузере и написать против них код. Возможно, нам нужно услышать щелчок, изменение ввода, фокус или размытие. Возможно, нам нужно сделать что-то вроде прослушивания щелчка в любом месте документа. Что ж, хорошие новости: в Angular есть много способов сделать это. В этом посте я собираюсь показать вам четыре распространенных способа.

Привет! Сегодня я собираюсь показать вам, как мы можем добавить CSS-фреймворк в Angular, и для этого поста я использую Bootstrap.

Недавно фреймворк Angular запустил интересные функции в версии V17. В этой статье мы узнаем, как начать использовать API View Transition. У этой функции нет хорошей документации, идея здесь — объяснить на практике.

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

Управление подписками - одна из самых сложных частей работы с RxJS и Observables в Angular. Даже с такими помощниками, как async pipe, takeUntilDestroyed и auto-unsubscribe, легко столкнуться с ошибками и утечками памяти. Новая функция Signals в Angular призвана решить эту проблему, представив более простую модель реактивного программирования без подписки.

Мы рассмотрим принципы построения хорошего атомарного дизайна, как создавать веб-компоненты с помощью Stencil и, наконец (возможно, самое важное), как разрешить вашей компании создавать и внедрять систему проектирования.

Angular уже некоторое время (начиная с Angular 14) позволяет объявлять и использовать так называемые автономные компоненты. Это компоненты, не зависящие от модуля, и поэтому их можно использовать без необходимости объявлять в каком-либо модуле.

Мы рассмотрим новый синтаксис потока управления, который был выпущен с #Angular 17, и его преимущества по сравнению со старым синтаксисом и новыми трюками, которые он содержит.

С выпуском Angular 17 я хотел изучить синтаксис потока управления в Angular и продемонстрировать его преимущества. Новый синтаксис, который был частью версии Angular для версии 17, наряду с рядом других функций, которые мы рассмотрим в будущем, - это большое дело и огромный отход от того, как мы реализовали поток управления в Angular.

Поддержка интернационализации — одна из сложных тем во фронтенд-разработке, все всегда добавляют только ключи и значения для основной локали, обычно английского (en или en-gb), оставляя переводы для других языков на потом.

Мы столкнулись с этой проблемой в одном из наших проектов при реализации локализации.

В исходной версии мы не настраивали параметры локализации, завершили сборку и получили результат.

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

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

Когда дело доходит до создания настраиваемых компонентов в Angular, думайте об этом как о рецепте вашего утреннего кофе: у вас есть основа (@Input(), @Output()) и дополнительные компоненты (*ngIf) для создания идеального напитка. Однако чем больше начинки вы добавляете в свой утренний кофе, тем больше ваш компонент становится слишком тесным для вашей базовой бизнес-логики.