Комментарии 9
— Кукушка-кукушка, сколько мне жить осталось?
— Ку.
— А что так ма...
А элементы внутри контейнера отображаются в одном месте страницы или они могут быть разбросанны по всему приложению ?
С 17 версии Angular появился новый синтаксис в шаблонах@for
, @if
, @switch
, которые позволяют избежать использования ng-container в описанных выше кейсах. Например, так:
@if(expression){
<div>first part content </div>
<div>second part content </div>
}
В кейсах с ngTemplateOutlet он вполне подходит, а вот вместе с новыми фичами шаблона - стал в большинстве случаев лишним.
Что-то это такой новый синтаксис, что я не могу найти его в документации...
Его ввели в 17й версии ангулара, и, возможно, примерно тогда же перевели его блог на медиум, который наш доблесный ркн запретил нам смотреть (о людях же пекутся). В документации пока остаётся старый синтаксис, но, думаю, не сильно на долго.
собственно вот этот синтаксис в документации: https://angular.dev/guide/templates/control-flow
Вместе с 17 версией документация перешла на новый домен и новый сайт. https://angular.dev
Выше уже указали ссылку на новый синтаксис, но тоже продублирую тут: https://angular.dev/guide/templates/control-flow
Сам синтаксис обсуждали в RFC ещё год назад https://github.com/angular/angular/discussions/50719
Чтобы использовать *ngIf нужно импортировать commonModule, или импортировать из него NgIf-директиву. Это не очень удобно, особенно в разрезе standalone-компонентов. А @if
не требует импорта, это часть синтаксиса шаблона, что убирает ещё один импорт. Про то, что не нужен в некоторых кейсах ng-component, я уже написал.
Также, новый синтаксис для for обязывает имеет trackBy, но тут же упрощает его использование, достаточно при описании написать что-то типа `@for(item of items; track item.id)`, и получаем уменьшение перерисовок с привязкой к id-сущности.
ng-container