Stack Exchange
If else condition inside tabContent of bootstrap tabset in angular 7
I want to display a loading icon inside the tab content.
Unfortunately, ng-template inside an ng-template isn't working. 
Please help me get this.
Following is the tabContent code section
<ng-template ngbTabContent>
    <div class="container-fluid" id="messagebox">
        <div class="col-md-12" id="{{successFlag}}">

            <div class="row child-data {{successFlag}}" *ngIf="childReportData.length >= 1">
                <div *ngIf="childDataLoad else loaded" class="loading-screen">
                    <img src="./assets/images/loading.gif" alt="loading" title="loading">
                </div>
                <ng-template #loaded>
                    <div class="col-md-1" id="messagebox-icon">
                        <div *ngIf="successFlag === 'success' ">
                            <span class="fa fa-2x fa-check text-success"></span>
                        </div>
                    </div>
                    <div class="col-md-11">
                        <div class="row h5" id="messagebox-header">Process {{successFlag | titlecase}}</div>
                        <div class="vertical-time-simple vertical-without-time vertical-timeline vertical-timeline--animate vertical-timeline--one-column" *ngFor="let cdata of childReportData" [ngClass]="cdata.currentStatus.toLowerCase() == 'success' ? 'success' :( cdata.currentStatus.toLowerCase() == 'pending') ? 'pending' : ( cdata.currentStatus.toLowerCase() == 'in-progress') ? 'in-progress' : 'fail' ">
                            <div class="vertical-timeline-element">
                                <span style="display:none">{{cdata.currentStatus}}</span>
                                <div>
                                    <span class="vertical-timeline-element-icon bounce-in" [ngClass]="cdata.currentStatus.toLowerCase() == 'success' ? 'text-success' :( cdata.currentStatus.toLowerCase() == 'pending') ? 'text-info' : ( cdata.currentStatus.toLowerCase() == 'in-progress') ? 'text-warning' : 'text-danger' "></span>
                                    <div class="vertical-timeline-element-content bounce-in">
                                        <!-- <span>{{cdata.currentStatus}}</span> -->
                                        <h4 class="timeline-title">{{cdata.stepName}} start  <span [ngClass]="cdata.currentStatus.toLowerCase() == 'success' ? 'text-success' :( cdata.currentStatus.toLowerCase() == 'pending') ? 'text-info' : ( cdata.currentStatus.toLowerCase() == 'in-progress') ? 'text-progress' : 'text-danger' ">{{cdata.timeStarted | date:'medium'}} <span *ngIf="!isDateNull(cdata.timeEnded) "><span style="color:#4B515D"> to </span> {{cdata.timeEnded | date:'medium'}}</span> </span></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </div>
            <div *ngIf="childReportData.length < 1" class="child-data">
                <p>No Data to display</p>
            </div>
        </div>
    </div>
</ng-template>


It looks like you've forgot to add ; sign.  An example from Angular docs:
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

So your should look like this:
 <div *ngIf="childDataLoad; else loaded" class="loading-screen">
     <img src="./assets/images/loading.gif" alt="loading" title="loading">
     <!-- the other code is omitted for the brevity -->
 </div>
<ng-template #loaded>
    <!-- the other code is omitted for the brevity -->
</ng-template>


The problem here is that  inside an other  is not working...the else part should be inside tabcontent.
