How to use *ngIf else in AngularJS ?

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

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

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

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

• 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. html

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

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