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?

score 1434 · Accepted Answer · edited Nov 03 '21 at 16:08

1434

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.

edited Nov 03 '21 at 16:08

Peter Mortensen

30,738
21
105
131

answered Mar 24 '17 at 18:20

El houcine bougarfaoui

35,805
9
37
37

11

I hoped there was a way just to use without another tag like div, but oddly it is not... I know the
gets removed as you use it, but it's kinda weird as implementation I think.
– andreas Mar 30 '17 at 20:03
40

@andreas You can use `` for the if-clause – Martin Schneider Jun 17 '17 at 11:08
4

Note: you can use `ng-container` for the container containing *ngIf, but not for the template – Simon_Weaver Jan 18 '18 at 01:32
@Simon_Weaver I figured it out the hard way. But why? why didn't they allow `*ngIf ` to work on `ng-template`? – Eran Medan Mar 15 '18 at 06:02
2

here is ignored it is not ignored. it is place fot injecting ng-template – dimson d Apr 25 '18 at 19:32
Just to add a little info, assigning the template value(#templateValue) directly to component tag and using it with else syntax doesn't work. You should embed the component tag inside of `` and assign the template value to `ng-template` like, `` – DongBin Kim May 23 '18 at 09:39
Hi @Bougarfaoui El houcine , Can I use
other content here...
instead other content here... ? Means Can I use div rather than template ? – Shubham Verma Aug 02 '18 at 07:19
I've found that you can create if-then-elseif-elseif-elseif using ng-containers and ng-templates. ` ` It's super verbose though, and the need for #ids for each ifelse feels clunky, for something that other web frameworks can accomplish with a single tag/operation. – Josiah Aug 15 '18 at 16:22
Agree with @Josia, it's clunky. If would have been more natural to have an *ngElse much like the *ngSwitchDefault implementation. Because of that, we find it bad practice to use angular's "ngIf..else" construct due to its inconsistency, non intuitiveness and its template variable pollution. It's just weird. You are better off negating the *ngIf for your else blocks, it's more readable most of the time. – Max Feb 09 '19 at 03:57
Having started out on Angular 1 and then left for React, now I am back on a project using Angular 5... is this real life? This construct is legitimately bad. – user602525 Feb 15 '19 at 03:52
This also works in ionic 4 with angular 7. Thanks a lot :) – Kamlesh Apr 01 '19 at 05:13
Within a 'then' or 'else' statement we're specifying the id of the ng-template tag to use. Isn't that basically a goto-statement?! – Antony Sep 17 '19 at 16:23
Is there a way to bind ngTemplateOutletContext when doing it this way? – fix Jan 10 '23 at 14:28

score 262 · Answer 2 · edited Nov 03 '21 at 16:13

In Angular 4.x.x

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

Just use If

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

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>

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>

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.

It seems like the compiler does not accept `...; else ...`. Probably the `;` should be removed. — slartidan, Feb 27 '18 at 15:55
in angular-6, I tested with **`...; else ...`** and it worked — WasiF, Sep 07 '18 at 14:32
What is the advantage of 4 over 2? Basically both of them has the same result with the difference that in the case of 4 we have an extra `
` without any content. — Szilard Mihocsa, Jan 27 '23 at 08:05

Code Spy · Answer 3 · 2020-04-27T03:59:10.287

58

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>

edited Apr 27 '20 at 03:59

answered Aug 07 '19 at 15:08

Code Spy

9,626
4
66
46

2

The question is, which one is better? From a performance point of view, I suspect that the 1st one has 2 directives which need to be evaluated independently, while the other 2 have only one. If you had this in a list/table of thousands of elements, would it not be slower? – AsGoodAsItGets Nov 12 '20 at 17:04
Solution 1 is bad if default value is not truthy – Bitzu May 11 '22 at 15:17

score 47 · Answer 4 · edited Nov 03 '21 at 16:40

47

Just add new updates from Angular 8.

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>

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>

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>

edited Nov 03 '21 at 16:40

Peter Mortensen

30,738
21
105
131

answered Jan 22 '20 at 11:03

Hoang Subin

6,610
6
37
56

Great! We have recently moved to angular 8 – Islam Murtazaev Mar 16 '20 at 12:49
1 is not working, i tried the condition to be false but it doesnt display the template elseBlock – rosiejaneenomar Jul 23 '21 at 08:26
@rosiejaneenomar I think something wrong with your code. If can, u can give me sample of your code. – Hoang Subin Jul 26 '21 at 04:59
@rosiejaneenomar please follow the guide from Angular document https://angular.io/api/common/NgIf – Hoang Subin Dec 27 '21 at 09:04

score 39 · Answer 5 · edited Mar 24 '22 at 07:48

39

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>

edited Mar 24 '22 at 07:48

David Wolf

1,400
1
9
18

answered Mar 23 '21 at 18:21

Naeem Bashir

1,937
20
17

score 35 · Answer 6 · answered Sep 29 '17 at 09:03

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>

Stephen Jenkins · Answer 7 · 2021-03-02T17:08:34.117

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.

I don't find using template for just a single line nice and clean — arunwithasmile, Sep 13 '21 at 11:38
@arunwithasmile same, it is just the example given for both syntaxes. *ngIf is the way to go unless needed. — Stephen Jenkins, Feb 25 '22 at 12:54

score 14 · Answer 8 · edited Nov 03 '21 at 16:37

14

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

edited Nov 03 '21 at 16:37

Peter Mortensen

30,738
21
105
131

answered Oct 24 '19 at 11:43

DeC

2,226
22
42

score 9 · Answer 9 · edited Nov 03 '21 at 16:09

9

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

edited Nov 03 '21 at 16:09

Peter Mortensen

30,738
21
105
131

answered Jul 23 '17 at 13:13

Prashant Shrivastava

189
2
9

3

This doesn't work. If it were correct, then it still wouldn't add any value because the accepted answer shows already how to do it. – Günter Zöchbauer Jul 23 '17 at 13:18

score 6 · Answer 10 · edited Nov 03 '21 at 16:20

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

score 6 · Answer 11 · edited Nov 03 '21 at 16:31

6

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

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

edited Nov 03 '21 at 16:31

Peter Mortensen

30,738
21
105
131

answered Nov 13 '18 at 16:30

RazvanParautiu

2,805
2
18
21

score 6 · Answer 12 · edited Nov 03 '21 at 16:35

6

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

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

or

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

edited Nov 03 '21 at 16:35

Peter Mortensen

30,738
21
105
131

answered May 13 '19 at 07:58

Sebastian Viereck

5,455
53
53

score 6 · Answer 13 · answered Jun 01 '22 at 09:28

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

score 5 · Answer 14 · edited Nov 03 '21 at 16:30

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

score 5 · Answer 15 · answered May 18 '19 at 09:03

5

ng-template

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


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

answered May 18 '19 at 09:03

Aniket

552
4
13

score 5 · Answer 16 · edited Mar 19 '23 at 09:43

5

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

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

edited Mar 19 '23 at 09:43

F. Müller

3,969
8
38
49

answered Mar 14 '23 at 11:13

Dummy1

63
1
4

Same as https://stackoverflow.com/questions/43006550/how-can-i-use-ngif-else/46833339#46833339 – ErDeep Mar 14 '23 at 11:16

score 4 · Answer 17 · edited Jun 02 '17 at 19:25

4

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

edited Jun 02 '17 at 19:25

msanford

11,803
11
66
93

answered Apr 11 '17 at 03:51

Amit Gaikwad

516
4
12

1

looks like Oracle case when expression.. :-) – Peter Jun 30 '17 at 08:09
5

You're referring to the [ternary operator which exists in most C-based languages](https://en.wikipedia.org/wiki/%3F:) but this is closer to [Kotlin's if expressions](https://kotlinlang.org/docs/reference/control-flow.html#if-expression). – mythz Jun 30 '17 at 11:05
condition?stmnt1:stmnt2, this doesn't work only in java. So it is not only java related – Andre TOKAM May 03 '23 at 14:31

score 4 · Answer 18 · answered Jul 06 '20 at 05:31

4

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

answered Jul 06 '20 at 05:31

Maddy

503
6
17

An explanation would be in order. E.g., what is the idea/gist? Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/62749789/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Nov 03 '21 at 16:41

score 2 · Answer 19 · answered Apr 17 '18 at 15:44

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>

answered Apr 17 '18 at 15:44

Amir Touitou

3,141
1
35
31

An explanation would be in order. E.g., what is the idea/gist? Please respond by [editing (changing) your answer](https://stackoverflow.com/posts/49882364/edit), not here in comments (***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Nov 03 '21 at 16:23

score 2 · Answer 20 · edited Nov 03 '21 at 16:27

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:

NgIf - directive
Template syntax

Your answer states it's valid for Angular 4 through 6. It made sense 2018 when you wrote it but now, 4 years later, it suggests that it's **not** necessarily valid for the latest version. I just used it in Angular 13 and it works perfectly. You may want to consider updating the formulation to make your answer from great to even better. — Konrad Viltersten, Mar 15 '22 at 06:40

score 1 · Answer 21 · answered Nov 02 '22 at 17:47

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>

score 0 · Answer 22 · edited Nov 03 '21 at 16:28

0

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.

edited Nov 03 '21 at 16:28

Peter Mortensen

30,738
21
105
131

answered Sep 20 '18 at 07:29

Nikhil Das Nomula

1,863
5
31
50

Can you [provide](https://stackoverflow.com/posts/52419833/edit) one or more code examples? (But ***without*** "Edit:", "Update:", or similar - the answer should appear as if it was written today.) – Peter Mortensen Nov 03 '21 at 16:28

How can I use "*ngIf else"?

22 Answers22

Syntax for ngIf/Else

Using NgIf / Else/ Then explicit syntax

Observables with NgIf and Async Pipe

In Angular 4, 5 and 6

Linked

Related