May 25, 2023

Как использовать *ngIf совместно с else

Самая простая форма

<div *ngIf="condition">Контент отображается, если условие истинно</div>

Расширенный синтаксис

<ng-template [ngIf]="condition">
 <div>Контент отображается, если условие истинно</div>
</ng-template>

Использование else

<div *ngIf="condition; else elseBlock">
    Контент отображается, если условие истинно
</div>

<ng-template #elseBlock>
    Контент отображается, если условие ложно
</ng-template>

Использование блоков then и else

<div *ngIf="condition; then thenBlock else elseBlock">
    Контент никогда не отображается
</div>

<ng-template #thenBlock>
    Контент отображается, если условие истинно
</ng-template>

<ng-template #elseBlock>
    Контент отображается, если условие ложно
</ng-template>

Расширенный функционал

<ng-template 
   [ngIf]="condition" 
   [ngIfThen]="thenBlock" 
   [ngIfElse]="elseBlock"
>
  Контент никогда не отображается
</ng-template>

<ng-template #thenBlock>
  Контент отображается, если условие истинно
</ng-template>

<ng-template #elseBlock>
  Контент отображается, если условие ложно
</ng-template>

https://devsday.ru/blog/details/39571