How to use *ngif else when am getting empty values


#1

Am developing android application am getting data from service call am checking only “null”.

when data is empty i want to display “NA”.
(Issue is when data is empty html view is getting blank)

when data is present am showing data on html view

HTML Code below:


<ion-content padding class="no-scroll background">
	<ion-item class="showCompletedItem">
		<ion-label class="showCompletedLabel">Show Completed?</ion-label>
		<ion-checkbox item-right [(ngModel)]="showCompleted" (ionChange)="toggleShowCompleted()" class="showCompletedCB"></ion-checkbox>
	</ion-item>
	<ion-item class="proSelectDiv">
		<ion-label class="proSelectLabel">Please select a Pro</ion-label>
		<ion-select [(ngModel)]="currentPro" (ionChange)="handleProChange()">
			<ion-option *ngFor="let dispatch of dispatches; let i = index;" selected="{{(i==0).toString()}}">{{dispatch.division}}-{{dispatch.proNumber}} {{dispatch.shortDate}}</ion-option>
		</ion-select>
	</ion-item>
	<ion-grid class="proDateDiv">
		<ion-row sytle="margin-bottom: 5px;" *ngIf="currentDispatch != null">
			<ion-col col-2>Pro:</ion-col>
			<ion-col col-3>{{currentDispatch.division}}-{{currentDispatch.proNumber}}</ion-col>
			<ion-col col-2>Date:</ion-col>
			<ion-col col-5>{{formatDate(currentDispatch.dispatchDate)}}</ion-col>
		</ion-row>
	</ion-grid>

	<dispatch-detail *ngIf="detailInfoOne != null" #detailOne [detailInfo]="detailInfoOne" [index]="0" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoTwo != null" #detailTwo [detailInfo]="detailInfoTwo" [index]="1" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoThree != null" #detailThree [detailInfo]="detailInfoThree" [index]="2" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoFour != null" #detailFour [detailInfo]="detailInfoFour" [index]="3" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoFive != null" #detailFive [detailInfo]="detailInfoFive" [index]="4" (receivedClick)="handleChildClick($event)"></dispatch-detail>
</ion-content>

#2

Have you tried If else statement of Angular 4?
You could put if else condition inside your html tag.
Please go through https://coursetro.com/posts/code/52/Trying-out-the-New-Angular-4-If-Else-Conditionals

Also, *ngIf="detailInfoOne " will be false for value null and undefined of detailInfoOne, no need to check like *ngIf=“detailInfoOne != null”.


#3

Thank you…