NgIf

Функциональность

Как оно работает

A structural directive that conditionally includes a template based on the value of an expression coerced to Boolean. When the expression evaluates to true, Angular renders the template provided in a then clause, and when false or null, Angular renders the template provided in an optional else clause. The default template for the else clause is blank.

Почему здесь перфоманс важен

Примеры плохого кода

*ngIf="{} | number" где в качестве условия задается новое значение ссылки на объект или число, которое меняется каждый цикл Анимации где надо скрыть или показать элементы

Примеры хорошего кода

*ngIf="Boolean({} | number)"

Можем ли мы писать проект без этого

Да, самостоятельно говоря ангуляру какую темплейту мы хотим показывать в данный момент во вью контейнере. С большего это удобный сахар, который мы бы не хотели писать самостоятельно

Подводные камни

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

• Отображение контента вызовет сдвиг всего лейаута, вместо того чтобы просто отдать данные вглубь

• Время, через которое появится контент в темплейте теперь напрямую зависит от скорости вашего интернета или других I/O, из которых берутся данные

<app-cmp *ngIf="data$ | async" [data]="data"></app-cmp>

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

Что влияет на перформанс в этой фиче?

Частота изменения условия и время отрисовки темплейты

Как можно избавиться от негативного влияния на перформанс

• Каст значения условия к булеву значению, вроде даже есть линтеры для этого

• Перестать воспринимать директиву как контейнер для async пайпы, для этого есть другие более подходящие решения (rxLet, tuiLet). Где по факту суть директив заключается в том, чтобы 1 раз отрисовать контент, а дальше через контекст передавать данные.

• Использовать там, где работают константные значение, например пользователь залогинен или нет, данные есть или нет. В случае когда необходимо данные показывать/не показывать часто лучше использовать display: none

Чего не хватает в базовой функциональности

Suspense темплейты для случая, когда в потоке данных еще не было или значение не было установлено

Опции просто прятать содержимое, вместо удаления из дома

Что кажется избыточным в базовой функциональности

Возможность использования директивы в качестве подписки на поток и отсутствие при этом let директивы