ngFor в Angular: примеры и лучшие практики
ngFor — директива Angular для повторного вывода шаблонов по коллекции или числу. Статья даёт примеры перебора, вложенных циклов, стилизации по индексу и советы по оптимизации с trackBy.
ngFor — директива Angular для повторного вывода шаблонов по коллекции или числу. Статья даёт примеры перебора, вложенных циклов, стилизации по индексу и советы по оптимизации с trackBy.
Пользовательские pipe позволяют преобразовывать данные в шаблонах Angular. Создайте pipe через CLI, реализуйте transform, зарегистрируйте в модуле и покройте тестами. Предпочитайте pure pipe и выносите тяжёлую логику в сервисы.
Декоратор Output позволяет дочернему компоненту отправлять события и данные в родительский через EventEmitter. В статье есть пошаговый пример, советы по отладке, альтернативы и чек-листы.
Клонируйте проект Angular с GitHub, установите Node.js и npm, установите Angular CLI, выполните npm install и запустите ng serve. Это позволит открыть приложение по адресу http://localhost:4200/ и начать разработку или изучение кода.
Этот материал объясняет, что такое директивы в Angular и как использовать шесть наиболее распространённых: ngIf, ngFor, ngClass, ngStyle, ngModel и ngSwitch. Включены готовые примеры кода, советы по производительности, распространённые ошибки и чек-листы.
ngFor — структурная директива для повторного рендеринга блоков. Поддерживает индексы, first/last/odd/even, вложенные циклы и оптимизацию через trackBy и виртуализацию.
Компоненты — это переиспользуемые блоки в Angular. Статья показывает создание через CLI, добавление шаблона/стилей/логики, передачу @Input и настройку маршрутов.
В статье показано, как создать страницы в Angular, зарегистрировать маршруты в app-routing.module.ts, отобразить компоненты через <router-outlet> и навигировать с помощью ссылок и метода router.navigate().
В Angular декоратор @Output вместе с EventEmitter позволяет дочернему компоненту отправлять события и данные родителю; подпишитесь в шаблоне родителя через (event)='handler($event)'.