Я использую Angular, и я хочу использовать *ngIf else(доступно с версии 4) в этом примере:

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

Как я могу достичь того же поведения с ngIf else?

Угловые 4 и 5 :

используя else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

Вы также можете использовать then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

или thenодин:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

Демо:

Plunker

Подробности:

<ng-template>: это собственная реализация <template>тега Angular в соответствии с MDN :

Элемент HTML <template>представляет собой механизм для хранения контента на стороне клиента, который не должен отображаться при загрузке страницы, но может впоследствии быть создан в течение времени выполнения с использованием JavaScript.

В Angular 4.xx Вы можете использовать ngIf четырьмя способами для достижения простой процедуры if else:

1. Просто используйте, если

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. Использование If с остальным (обратите внимание на templateName )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. Использование If with Then (обратите внимание на templateName )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. Использование If с Then и Else

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
       Here is never showing
   </div>
   
   <ng-template #thenTemplateName>
       If isValid is true
   </ng-template>
   
   <ng-template #elseTemplateName>
       If isValid is false
   </ng-template>
   

Совет: ngIf оценивает выражение и затем отображает шаблон then или else на его месте, когда выражение верно или ложно, соответственно. Как правило,

• затем шаблон является встроенным шаблоном ngIf, если он не связан с другим значением.
• иначе шаблон пуст, если он не связан.

Чтобы работать с наблюдаемым, это то, что я обычно делаю для отображения, если наблюдаемый массив состоит из данных.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

«bindEmail» проверит, доступна электронная почта или нет. если электронная почта существует, то будет отображаться Logout, иначе будет отображаться Login

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

Вы можете использовать <ng-container>и <ng-template>для этого

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

Вы можете найти демо Stackblitz Live ниже

живое демо

Надеюсь, что это поможет ... !!!

Для угловых 9/8

Ссылка на источник с примерами

    export class AppComponent {
      isDone = true;
    }

1) * нгф

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * ngIf и остальное

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, тогда и остальное

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

Синтаксис для ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

Использование NgIf / Else / Тогда явный синтаксис

Чтобы добавить шаблон, нужно просто явно привязать его к шаблону.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

Наблюдаемые с NgIf и Async Pipe

Больше подробностей

Просто добавьте новые обновления от Angular 8.

1. В случае, если с помощью else мы можем использовать ngIf и ngIfElse .

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

2. В случае, если с то, мы можем использовать ngIf и ngIfThen .

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>

3. В случае, если с помощью then и else мы можем использовать ngIf , ngIfThen и ngIfElse .

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

В Angular 4.0 if..elseсинтаксис очень похож на условные операторы в Java.

В Java вы используете для "condition?stmnt1:stmnt2".

В Angular 4.0 вы используете *ngIf="condition;then stmnt1 else stmnt2".

результирующее значение выражения ngif не будет просто логическим значением true или false

если выражение является просто объектом, оно все равно оценивает его как истинность.

если объект не определен или не существует, то ngif будет оценивать его как ложность.

обычно используется, если объект загружен, существует, а затем отображает содержимое этого объекта, в противном случае отображается «загрузка .......».

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

другой пример:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

Другой пример:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

шаблон NGIF

NGIF угловой 4

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

Существует две возможности использовать условие if для тега HTML или шаблонов:

1. * директива ngIf от CommonModule для тега HTML;
2. если еще

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

В угловых 4, 5 и 6

Мы можем просто создать ссылочную переменную шаблона ^[2] и связать ее с условием else внутри директивы * ngIf

Возможные синтаксисы ^[1] :

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

ДЕМО: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

Источники:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

Вы также можете использовать Javascript кратковременный условный оператор? в угловом, как это:

{{doThis() ? 'foo' : 'bar'}}

или

<div [ngClass]="doThis() ? 'foo' : 'bar'">

Я знаю, что это было давно, но хочу добавить, если это поможет. Я решил использовать два флага в компоненте и два ngIf для соответствующих двух флагов.

Это было просто и хорошо работало с материалом, так как ng-template и материал плохо работали вместе.