The else part does not execute in *ngIf statement

Question

I am using *ngIf statement but getting an issue in it: The else part does not execute. I don't know why, here is the source code.

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
    <div formArrayName="controlArray">
        <div class="form-group"
             *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">       
             {{control.value}}                     
             <span *ngIf="control.value!='dropdown';else addDropDown">                                
                 <input type="{{control.value}}"   
                        class="form-control"
                        [formControlName]="i" />                                  
                 <ng-template #addDropDown>
                     <p>hello world</p>
                     <select class="form-control"                   
                             [formControlName]="i">  
                     </select>
                 </ng-template>
             </span>  
         </div>  
    </div>  
</form>

Please help, thanks.

Answer 1

Template for else condition should be @ same level as for *ngIf condition. When *ngIf is false, the current element is removed from the DOM. Since your ng-template is inside the element is it not available for else condition.

The correct way for *ngIf else to work is have else template to be anywhere except inside the *ngIf in the hierarchy of the DOM.

For more info: https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else

In your case change the code to

 <!-- If Template -->
 <span *ngIf="control.value!='dropdown';else addDropDown">                                
            <input 
              type="{{control.value}}"   
              class="form-control"
              [formControlName]="i">                                 
 </span>  

 <!-- Else Template -->
  <ng-template #addDropDown>
              <p>hello world</p>
              <select `enter code here`
                class="form-control"                   
                [formControlName]="i">  
              </select>
  </ng-template>