Ngif else Async data data

Question

i don't want to see error template as im waiting for data from API i want spinner to continue loading until API data is called. with how its done now i get spinner then error template then data from API binded which is logically wrong.

 import { Component, OnInit } from '@angular/core'; import { forkJoin, Subscription } from 'rxjs'; import { ActivatedRoute, Params } from '@angular/router'; import { switchMap } from 'rxjs/operators'; import { OrdersM50Service } from '../services/orders-m50.service'; import { M50Detail } from '../interfaces/order-m50.interface'; import { LookupService } from '../../shared/services/lookup.service'; import { DCLookup, OrderTypeLookup } from '../../shared/models/lookups.interface'; @Component({ selector: 'idl-m50-deliver-update', templateUrl: './m50-deliver-update.component.html', styleUrls: ['./m50-deliver-update.component.scss'] }) export class M50DeliverUpdateComponent implements OnInit { public order: M50Detail; public loading = false; public orderType: OrderTypeLookup; public dc: DCLookup; public error: any; private _paramsSub$: Subscription; private _id: string; constructor(private _ordersService: OrdersM50Service, private _lookupService: LookupService, private _route: ActivatedRoute) {} ngOnInit(): void { this.loading = true; // console.log(errorHandler); this._paramsSub$ = this._route.params .pipe(switchMap((params: Params) => { this._id = params['id']; const orderRequest = this._ordersService.getM50ById(this._id); const orderTypeRequest = this._lookupService.getOrderTypesM50(); const dcRequest = this._lookupService.getDCs(); return forkJoin([orderRequest, orderTypeRequest, dcRequest]); })) .subscribe((result: [ M50Detail, Array < OrderTypeLookup > , Array < DCLookup > ]) => { console.log('FORKJOIN RESULT', result); this.order = result[0]; this.orderType = this._getLookUpItemById(result[1], this.order.order_type); this.dc = this._getLookUpItemById(result[2], this.order.dc); this.loading = false; }, err => { console.log(err); this.error = err; this.loading = false; }); } } 

 <div class="orders-container p24"> <div class="heading"> <h1>M50 View</h1> </div> <div class="progress-cont"> <div *ngIf="loading" style="font-size: 1px" class="progress progress-fade loop info"></div> </div> <idl-m50-deliver-view *ngIf="order; else errorCont" [status]="order?.status" [order]="order" [dc]="dc" [orderType]="orderType"> </idl-m50-deliver-view> </div> <ng-template #errorCont> <idl-error-handler [errorHandler]="error"></idl-error-handler> </ng-template> 

the problem with the above code is that it loads error message while waiting for data from API, then after it is done getting data from the API it binds it to the Template. I want the error message to be displayed if there's an error not on wait.

Answer 1

Your condition is

*ngIf="order; else errorCont"

Of course you will see the error message, if you don't put a condition on your error variable !

Given you have order , loading and error , here are your conditions :

<div *ngIf="loading; else notLoading">
  <spinner/>
</div>
<ng-template #notLoading>
  <component *ngIf="order && !error"/>
  <error-component *ngIf="error"/>
</ng-template>