NgIf

Структурная директива, которая условно включает шаблон на основе значения выражения, приведённого к логическому типу. Если выражение возвращает true, Angular отображает шаблон, указанный в блоке then, а если false или null — шаблон, указанный в необязательном блоке else. Шаблон по умолчанию для блока else пуст.

Обычно используется сокращённая форма директивы *ngIf="condition", указанная в качестве атрибута элемента-якоря для вставляемого шаблона. Angular разворачивает её в более явную форму, в которой элемент-якорь находится внутри элемента <ng-template>.

Простая форма с сокращённым синтаксисом:

<div *ngIf="condition">Content to render when condition is true.</div>

Простая форма с развёрнутым синтаксисом:

<ng-template [ngIf]="condition"><div>Content to render when condition is
true.</div></ng-template>

Форма с блоком «else»:

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Сокращённая форма с блоками «then» и «else»:

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

Форма с сохранением значения в локальной переменной:

<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>Content to render when value is null.</ng-template>

Директива *ngIf чаще всего используется для условного отображения встроенного шаблона, как в следующем примере. Шаблон else по умолчанию пуст.

@Component({
  selector: 'ng-if-simple',
  imports: [NgIf],
  template: `
    <button (click)="show = !show">{{ show ? 'hide' : 'show' }}</button>
    show = {{ show }}
    <br />
    <div *ngIf="show">Text to show</div>
  `,
})
export class NgIfSimple {
  show = true;
}

Отображение альтернативного шаблона с помощью else

Чтобы отобразить шаблон, когда expression возвращает false, используйте привязку шаблона else, как показано в следующем примере. Привязка else указывает на элемент <ng-template> с меткой #elseBlock. Шаблон можно определить в любом месте представления компонента, но для удобства чтения его обычно размещают сразу после ngIf.

@Component({
  selector: 'ng-if-else',
  imports: [NgIf],
  template: `
    <button (click)="show = !show">{{ show ? 'hide' : 'show' }}</button>
    show = {{ show }}
    <br />
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
  `,
})
export class NgIfElse {
  show = true;
}

Использование внешнего шаблона then

В предыдущем примере шаблон блока then указан непосредственно в содержимом тега, содержащего директиву ngIf. Можно также указать шаблон, определённый отдельно, сославшись на помеченный элемент <ng-template>. В этом случае используемый шаблон можно менять во время выполнения, как показано в следующем примере.

@Component({
  selector: 'ng-if-then-else',
  imports: [NgIf],
  template: `
    <button (click)="show = !show">{{ show ? 'hide' : 'show' }}</button>
    <button (click)="switchPrimary()">Switch Primary</button>
    show = {{ show }}
    <br />
    <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
    <ng-template #primaryBlock>Primary text to show</ng-template>
    <ng-template #secondaryBlock>Secondary text to show</ng-template>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
  `,
})
export class NgIfThenElse implements OnInit {
  thenBlock: TemplateRef<any> | null = null;
  show = true;

  @ViewChild('primaryBlock', {static: true}) primaryBlock: TemplateRef<any> | null = null;
  @ViewChild('secondaryBlock', {static: true}) secondaryBlock: TemplateRef<any> | null = null;

  switchPrimary() {
    this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
  }

  ngOnInit() {
    this.thenBlock = this.primaryBlock;
  }
}

Сохранение результата условия в переменной

Возможно, вам потребуется отобразить несколько свойств одного объекта. Если данные загружаются асинхронно, объект может иметь значение undefined. В этом случае можно использовать ngIf и сохранить результат условия в локальной переменной, как показано в следующем примере.

@Component({
  selector: 'ng-if-as',
  imports: [NgIf, JsonPipe, AsyncPipe],
  template: `
    <button (click)="nextUser()">Next User</button>
    <br />
    <div *ngIf="userObservable | async as user; else loading">
      Hello {{ user.last }}, {{ user.first }}!
    </div>
    <ng-template #loading let-user>Waiting... (user is {{ user | json }})</ng-template>
  `,
})
export class NgIfAs {
  userObservable = new Subject<{first: string; last: string}>();
  first = ['John', 'Mike', 'Mary', 'Bob'];
  firstIndex = 0;
  last = ['Smith', 'Novotny', 'Angular'];
  lastIndex = 0;

  nextUser() {
    let first = this.first[this.firstIndex++];
    if (this.firstIndex >= this.first.length) this.firstIndex = 0;
    let last = this.last[this.lastIndex++];
    if (this.lastIndex >= this.last.length) this.lastIndex = 0;
    this.userObservable.next({first, last});
  }
}

В этом коде используется только один AsyncPipe, поэтому создаётся только одна подписка. Условная инструкция сохраняет результат userStream|async в локальной переменной user. После этого локальную переменную user можно использовать в привязках несколько раз.

Условие отображает данные, только если userStream возвращает значение, поэтому для защиты от null при обращении к свойствам не нужно использовать оператор безопасной навигации (?.). На время ожидания данных можно отображать альтернативный шаблон.

Сокращённый синтаксис

Сокращённый синтаксис *ngIf разворачивается в две отдельные спецификации шаблонов для блоков «then» и «else». Например, рассмотрим следующую сокращённую инструкцию, предназначенную для отображения страницы загрузки во время ожидания загрузки данных.

<div class="hero-list" *ngIf="heroes else loading">
 ...
</div>

<ng-template #loading>
 <div>Loading...</div>
</ng-template>

Обратите внимание, что блок «else» ссылается на <ng-template> с меткой #loading, а шаблон для блока «then» указан в содержимом элемента-якоря.

Однако при разворачивании сокращённого синтаксиса Angular создаёт ещё один тег <ng-template> с директивами ngIf и ngIfElse. Элемент-якорь, содержащий шаблон для блока «then», становится содержимым этого элемента <ng-template> без метки.

<ng-template [ngIf]="heroes" [ngIfElse]="loading">
 <div class="hero-list">
  ...
 </div>
</ng-template>

<ng-template #loading>
 <div>Loading...</div>
</ng-template>

Наличие неявного объекта шаблона влияет на возможность вложения структурных директив. Подробнее об этом см. в разделе Структурные директивы.