How can I use "*ngIf else"?

Question

I'm using Angular and I want to use *ngIf else (available since version 4) in this example:

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

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

How can I achieve the same behavior with ngIf else?

Answer 1

Angular 4 and 5:

Using else:

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

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

You can also use 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>

Or then alone:

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

Demo:

Plunker

Details:

<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN:

The HTML <template> element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.

Update (Angular 17 and higher)

Angular now supports control flow syntax (introduced in Angular 17), which allows you to write cleaner and more expressive conditional logic directly in templates. This new syntax enables functionality similar to the ngIf directive but with support for else if.

Here’s how you can use it:

@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

Benefits:

• Simplified Conditional Logic: The @if and @else if syntax makes it easier to express conditional logic.
• No Need for CommonModule: Unlike ngIf, the control flow syntax doesn’t require importing the CommonModule.

This feature is particularly helpful for scenarios where you have multiple conditions to check in your templates, improving both readability and maintainability.

Answer 2

Update (Angular 17 and higher)

Angular now supports control flow syntax (introduced in Angular 17), which allows you to write cleaner and more expressive conditional logic directly in templates. This new syntax enables functionality similar to the ngIf directive but with support for else if.

Here’s how you can use it:

@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

Benefits:

• Simplified Conditional Logic: The @if and @else if syntax makes it easier to express conditional logic.
• No Need for CommonModule: Unlike ngIf, the control flow syntax doesn’t require importing the CommonModule.

This feature is particularly helpful for scenarios where you have multiple conditions to check in your templates, improving both readability and maintainability.

Answer 3

@if-else

In the older versions of Angular we used *ngIf and also the *ngIf="condition; else elseBlock".

That all gets better in Angular 17,18 up to 90% faster runtime performance.

We can now do this basic @if syntax.

@if (authenticated) {
  <button>Logout</button>
}

And we can also use an if-else syntax like this.

@if (authenticated) {
  <button>Logout</button>
} @else {
  <button>Sign up</button>
}

Answer 4

Since Angular 17, you can use built-in control flow, an alternative template syntax for conditionally showing, hiding or repeating elements. It allows you to do if else like the following:

@if (isValid) {
  content here ...
} @else {
  other content here...
}

With this syntax, it's not necessary to use ng-template for the else case. Additionally, it allows @else if, which has not been possible before.

Answer 5

The long waiting feature to support the if, else-if, else has been supported in Angular 17.

you can do it by following the below syntax:

`@if() {
   <div>Inside if condtion</div>
} @else if() {
   <div>Inside if else condtion</div>
} @else {
   <div>Inside else</div>
}`

Answer 6

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

<ng-template #templateName>
  If isValid is false
</ng-template>

Answer 7

So, this isn't actually using ng-if but many of the suggestions appear to deal with writing text in a conditional statement. I think this way is the best way to do that with least code or complication. You be the judge.

<div>{{variable == null ? 'Testing1' : 'Testing2'}}<div>
OR
<div>{{variable == null ? var1 : var2 }}<div>

Answer 8

**ngIf else**

<div *ngIf="isConditionTrue;else other_condition">
    your content here
</div>

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

**ngIf then else**

<div *ngIf="isConditionTrue;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>


**ngIf then**

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

Answer 9

If isShow is true then the first line execute, otherwise secondline executes, because elseBlockShow is working as a reference variable.

<div *ngIf="isShow; else elseBlockShow">
  Text to show for If
</div>
<ng-template #elseBlockShow>
  Text to show for else block
</ng-template>

Answer 10

Just add new updates from Angular 8.

1. For case if with else, we can use ngIf and 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. For case if with then, we can use ngIf and 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. For case if with then and else, we can use ngIf, ngIfThen, and 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>
   

Answer 11

You can use <ng-container> and <ng-template> to achieve this:

<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>

You can find the StackBlitz Live demo below:

Live demo

Answer 12

You can also use the JavaScript short ternary conditional operator ? in Angular like this:

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

or

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

Answer 13

There are two possibilities to use an if condition on an HTML tag or templates:

1. *ngIf directive from CommonModule, on HTML tag;
2. if-else

Answer 14

Syntax for ngIf/Else

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

Using NgIf / Else/ Then explicit syntax

To add a then template, we just have to bind it to a template explicitly.

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

Observables with NgIf and Async Pipe

For more details

Answer 15

The way I went about with is to have two flags in the component and two ngIfs for the corresponding two flags.

It was simple and worked well with material as ng-template and material were not working well together.

Answer 16

In Angular 4, 5 and 6

We can simply create a template reference variable ² and link that to the else condition inside an *ngIf directive

The possible syntaxes ¹ are:

<!-- 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>

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

Sources:

1. NgIf - directive
2. Template syntax

Answer 17

An ngif expression resulting value won’t just be the Boolean true or false.

If the expression is just an object, it still evaluates it as truthiness.

If the object is undefined, or non-existent, then ngif will evaluate it as falseness.

Common use is if an object loaded, exist, and then display the content of this object, otherwise display "loading.......".

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

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

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

Another example:

  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 ! -->

Another example:

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

ngif template

ngif Angular 4

Answer 18

In Angular 4.x.x

You can use ngIf in four ways to achieve a simple if-else procedure:

1. Just use If

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

2. Using If with Else (please notice to templateName)

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

3. Using If with Then (please notice to templateName)

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

4. Using If with Then and 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>
   

Tip: ngIf evaluates the expression and then renders the then or else template in its place when the expression is truthy or falsy respectively.

Typically the:

• then template is the inline template of ngIf unless bound to a different value.
• else template is blank unless it is bound.

Answer 19

"bindEmail" will check if email is available or not. If email does exist then Logout will show. Otherwise Login will show.

<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>

Answer 20

Here's some nice and clean syntax on Angular's NgIf and using the else statement. In short, you will declare an ElementRef on an element and then reference it in the else block:

<div *ngIf="isLoggedIn; else loggedOut">
   Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

I've taken this example from NgIf, Else, Then which I found to be really well explained.

It also demonstrates using the <ng-template> syntax:

<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
  <div>
    Welcome back, friend.
  </div>
</ng-template>

<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

And also using <ng-container> if that's what you're after:

<ng-container
  *ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>

<ng-template #loggedIn>
  <div>
    Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

Source is taken from here on Angular's NgIf and Else syntax.

Answer 21

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

Answer 22

For Angular 9/8

Source Link with Examples

    export class AppComponent {
      isDone = true;
    }

1) *ngIf

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

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

2) *ngIf and Else

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

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

3) *ngIf, Then and Else

    <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>

Answer 23

ng-template

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


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

Answer 24

<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>

Answer 25

To work with observable, this is what I usually do to display if the observable array consists of data.

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

Answer 26

In Angular 4.0 if..else syntax is quite similar to conditional operators in Java.

In Java you use to "condition?stmnt1:stmnt2".

In Angular 4.0 you use *ngIf="condition;then stmnt1 else stmnt2".