How to use *ngIf else in AngularJS ?

Introduction: The ngIf directive is used to show or hide parts of an angular application. It can be added to any tags, it is a normal HTML tag, template, or selectors. It is a structural directive meaning that it includes templates based on a condition constrained to boolean. When the expression evaluates to true it runs/displays the template given in the “then” clause. Or when the expression evaluates to false it displays the template given in the “else” clause. If there is nothing in else clause, it will by default display blank.

Syntax:

ngIf with an "else" block
filter_none

edit
close

play_arrow

link
brightness_4
code

<div *ngIf="condition; else elseStatement">
    when condition is true.
</div>
<ng-template #elseStatement>
    when condition is false.
</ng-template>
<!--It can be seen that the else 
    clause refers to ng-template,
    with the label #elseStatement -->

chevron_right


It internally creates two <ng-template>, one for “then” statement and another for “else”. So when the condition is true for ngIf, the content of the unlabelled <ng-template> gets displayed. And when false, the labelled <ng-template> runs.

Approach:

  1. As we know, ngIf else statement works on a variable that has a boolean type. Create an angular app and move to src/app. First, we need to define a variable say “check” in app.component.ts with a value true or false.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- Define a variable say "check" with
         value true/false in app.component.ts -->
    import { Component } from '@angular/core';
      
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
      
    export class AppComponent {
      check:boolean = true;
    }

    chevron_right

    
    

  2. After defining a variable, move to app.component.html and create two divisions using bootstrap classes. Move into the angular app and write command npm install bootstrap. The first division is for the “true” condition and the one inside <ng-template> is for the false condition. We have declared check to be true so we get a green division saying condition true. If the check was false, a red division saying condition false would be displayed.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- *ngIf else -->
    <div class="container-fluid">
        <div class="row bg-success 
                text-light h1 justify-content-center
                align-items-center" *ngIf="check;
                else elseStatement" 
                style="height:150px">Condition true
        </div>
      
      <ng-template #elseStatement>
        <div class="row bg-danger
                text-light h1 d-flex 
                justify-content-center align-items-center"
                style="height:150px">Condition false
        </div>
      </ng-template>
    </div>

    chevron_right

    
    

Output:



Output:

Advantages:

  • Programming language’s "if" block supports logical operators so it does "ngIf". It has support for all the logical operators like AND, OR, NOT, etc.
  • ngIf helps to avoid can’t read property error of undefined. Suppose there is a bound property called “student”. We are trying to access the “name” sub-property of the student which has value “Santosh”. If the student is null, it will return error undefined. So if we check for null before accessing sub-property, we will prevent error using *ngIf.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--This may error-->
    <div>
      {{student.name}}
    </div>
      
    <!--check using ngIf-->
    <p *ngIf="student">
      {{student.name}}
    </p>

    chevron_right

    
    

    Output:

    Santosh
  • ngIf vs Hidden: You might wonder why do we have to use ngIf when we have hidden attribute in HTML5. Yes, they do the same work but there is still a difference. The hidden attribute hides the selected element from the DOM but the element still exists in the DOM. Whereas ngIf gets rid of the selected part from the DOM. It doesn’t intervene with CSS.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--check is defined in component.ts 
        with value true (boolean)-->
    <div [hidden]="!check">
      Show this only if "check" is true
    </div>

    chevron_right

    
    

    Output:

    Show this only if "check" is true



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.