Полное руководство по Angular @if

Одно из самых заметных нововведений в Angular — это встроенный синтаксис для управляющих конструкций, который появился в версии 17. Он решает одну из самых частых задач, с которой сталкивается каждый разработчик: показывать или скрывать элементы на странице в зависимости от условия. Раньше для этого использовали привычную структурную директиву *ngIf. Теперь у нас есть более современная альтернатива — синтаксис @if, часть нового подхода к управлению шаблоном.

В этом гайде мы сравним оба варианта, разберёмся, чем @if лучше, и покажем, как можно перейти на него автоматически. Также поговорим об одной распространённой ошибке — о том, как не стоит использовать @if вместе с пайпом async.

Содержание

В этом материале разбираем:

• Зачем понадобился новый синтаксис управляющих конструкций
• Что такое @if в Angular
• Как работает синтаксис @if
• Как использовать @if вместе с else
• Как использовать @if, else if и else
• Почему @if не нужно импортировать
• Почему больше не нужен синтаксис со звёздочкой (*)
• Почему @if лучше, чем *ngIf
• Как просто перейти на новый синтаксис @if
• Чем @if отличается от скрытия элементов через CSS
• Распространённый антипаттерн: вложенные @if с пайпом async
• Краткое резюме

Зачем нужен новый синтаксис управляющих конструкций?

Как объясняет Минко Гечев в посте, где впервые представили @if, новый встроенный синтаксис управления потоком исполнения даёт сразу несколько преимуществ:

• Более лаконичный и удобный синтаксис, ближе к JavaScript, — выглядит интуитивно и требует меньше обращений к документации.
• Конструкции вроде @if сразу доступны в шаблоне — ничего импортировать не нужно.
• Улучшенная проверка типов за счёт более точного сужения типов.
• Этот синтаксис работает на этапе сборки, а не в рантайме, что снижает нагрузку и помогает уменьшить размер бандла, а заодно улучшить Core Web Vitals.
• Кроме того, новая система управления потоком в шаблоне упростит внедрение реактивного подхода на основе signal-ов в будущем.

Подробнее о @if и новом синтаксисе шаблонов можно почитать в официальной документации: Angular Control Flow.

Что такое @if в Angular?

@if для Angular — это то же самое, что обычный if для JavaScript.

Это новый синтаксис шаблонов, с помощью которого можно условно отображать элементы в шаблоне Angular. Он встроен в сам фреймворк и позволяет показывать или скрывать части интерфейса в зависимости от логического условия.

В отличие от привычной структурной директивы *ngIf, @if не требует импорта даже в standalone-компонентах — он доступен по умолчанию.

Синтаксис стал короче и понятнее, а ещё поддерживает конструкции else if и else, чего раньше в *ngIf не было.

Давайте разберёмся, как он работает.

Синтаксис @if

Вот простой пример, показывающий, как использовать новый синтаксис:

@Component({
  template: `
    @if (showHello) {
    <h2>Hello</h2>
    }
  `,
})
class Test {
  showHello: boolean = true;
}

Код выше отобразит заголовок Hello только в том случае, если значение свойства showHello — true.

Видите, насколько этот синтаксис похож на обычный if в JavaScript?

if (showHello) {
  return `<h2>Hello</h2>`;
}

Почти один в один!

Синтаксис @if с else

В отличие от старого *ngIf, новый синтаксис @if поддерживает конструкцию else.

Посмотрим на пример:

@Component({
  template: `
    @if (showHello) {
    <h2>Hello</h2>
    } 
    @else {
    <h2>Goodbye</h2>
    }
  `,
})
class Test {
  showHello: boolean = true;
}

Код выше работает так:

• Элемент <h2>Hello</h2> отображается, если свойство showHello — true.
• Элемент <h2>Goodbye</h2> отображается, если showHello — false.

Визуально это очень похоже на конструкцию if-else в JavaScript — читается просто и интуитивно.

Синтаксис @if else if else

И это ещё не всё. Angular теперь поддерживает и конструкции else if. Раньше с *ngIf так сделать было нельзя — приходилось выкручиваться с дополнительными переменными или вложенными блоками.

@Component({
  template: `
    @if (showHello) {
      <h2>Hello</h2>
    } 
    @else if (showGoodbye) {
      <h2>Goodbye</h2>
    } 
    @else {
      <h2>See you later</h2>
    }
  `,
})
class Test {
  showHello: boolean = true;
  showGoodbye: boolean = false;
}

Код выше работает следующим образом:

• Показывает заголовок <h2>Hello</h2>, если showHello — true.
• Если showHello — false, но showGoodbye — true, отображается <h2>Goodbye</h2>.
• Если оба условия ложны, выводится <h2>See you later</h2>.

Согласитесь, это почти дословно повторяет логику обычного if / else if / else в JavaScript — просто, понятно и без лишнего кода.

Почему @if больше не нужно импортировать?

Обратите внимание, что теперь нам не нужно импортировать директиву @if из @angular/common в шаблоны компонентов. Это потому, что @if — не директива. Это часть движка Angular.

Новый синтаксис встроен прямо в ядро шаблонизатора, и поэтому доступен «из коробки» в любом шаблоне. Он работает так же, как интерполяция {{variable}} или синтаксис i18n — ничего дополнительно подключать не нужно.

Почему теперь не нужен синтаксис со звёздочкой (*)?

Раньше * использовалась только потому, что ngIf была структурной директивой. Эта звёздочка — просто синтаксический сахар, который упрощал работу с такими директивами.

А с @if всё иначе: он не является структурной директивой, поэтому в звёздочке больше нет необходимости.

Почему @if лучше, чем *ngIf?

Кратко подведём итоги, чем @if выигрывает у *ngIf:

• Короче и понятнее
• Не требует импортов
• Поддерживает else if и else
• Не даёт лишней нагрузки в рантайме
• Подготавливает почву для будущего развития Angular (например, signal-ов)

Как просто перейти на новый синтаксис @if

Если вы используете более старые версии Angular, можно перейти на новый синтаксис @if с помощью Angular CLI.

В Angular CLI есть автоматическая миграция, которая обновит весь ваш код до нового синтаксиса @if:

ng generate @angular/core:control-flow

Эта команда заменит все директивы *ngIf в вашем проекте на новый синтаксис — и не только на @if, но также на @for и @switch.

Чем @if отличается от скрытия элементов с помощью обычного CSS

В HTML мы можем скрывать элементы, управляя свойствами display и visibility:

• если установить display: none, элемент не отображается в документе;
• если установить visibility: hidden, элемент не виден.

На первый взгляд результат один и тот же, но на самом деле это не так.

В обоих случаях скрытый элемент всё ещё существует в DOM, тогда как с @if — нет: элемент вообще не попадает в DOM.

Антипаттерн с несколькими вложенными @if и пайпом async

Помните, в начале мы упоминали антипаттерн, связанный с @if?

Если вы используете RxJS в своём коде, это важно, потому что такая ошибка встречается часто и напрямую касается @if.

Речь идёт об использовании @if не для отображения или скрытия элементов, а просто для получения значения из Observable с помощью пайпа async. Этот антипаттерн иногда называют «цепочкой async pipe» или «пирамидой ужаса».

Пример антипаттерна:

@if (user$ | async; as user) {
    ....
    @if (course$ | async; as course) {
        ....
        @if (lessons$ | async; as lesson) {
            ....
        }
    }
}

Как видно, мы используем async для распаковки значений разных Observable и сохраняем их в локальные переменные шаблона.

Затем эти переменные передаются в следующий @if.

Мы повторяем @if и async на нескольких уровнях страницы только ради доступа к данным — и больше ни для чего. Эта практика усложняет чтение и поддержку кода при большом количестве вложенностей. Кроме того, она усложняет рефакторинг, особенно если такая логика используется в нескольких местах на странице.

Хороший способ избежать этого — изменить компонент так, чтобы он предоставлял один data$ Observable, содержащий все нужные данные.

Начнём с описания интерфейса:

interface PageData {
    user: User;
    course: Course;
    lessons: Lesson[];
}

Затем создадим общий Observable:

@Component({...})
export class Component implements OnInit {
    
  private data$: Observable<PageData>;

  ngOnInit() {
    
    const user$ = // ... инициализация user$ Observable

    const course$  = // ... инициализация course$ Observable

    const lessons$ = // ... инициализация lessons$ Observable    
    
    this.data$ = combineLatest([user$, course$, lessons$])
      .pipe(
        map(([user, course, lessons]) => {
          return {
                user, 
                course, 
                lessons
            }
        })
    );
  }
}

Оператор combineLatest — это один из способов объединить Observable.

Наконец, используем @if с async в шаблоне:

@if (data$ | async; as data) {
    ....
    {{data.course}}

    {{data.user}}

    {{data.lessons}}
}

Как видно, это избавляет от ненужных вложенных @if и делает код гораздо более читаемым и поддерживаемым. Если применить такую структуру в начале шаблона, все нужные данные будут доступны в любом месте.

В этом гайде мы рассмотрели новый синтаксис @if в Angular. Мы увидели, что он более лаконичный и читаемый, не требует импортов и поддерживает конструкции else if и else, чего не было в прежнем синтаксисе с *ngIf.

С @if нам больше не нужна директива NgIf, как и странный местами синтаксис со звёздочкой (*), используемый для структурных директив.

Синтаксис @if — мощное и удобное дополнение к инструментам Angular. Попробуйте его в деле!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.