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

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

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.

   <!-- 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;
   }
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.

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

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.

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

  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.

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

  Output:

  Show this only if "check" is true