I am getting iframe URL from api and I need to load the iframe URL from api in my HTML in the angular 7 app. Until I get the url I show a loader to users. which is working all great until now. But after that when the iframe content loads into dom it takes a few seconds. At that moment my page is blank. I want to show a loader in this gap as well.

How to achieve it?

urlToOpen: any;

ionViewDidLoad() {
   this.dataProcess();
}

dataProcess() {
  this.canShowLoader = true;
 // @ts-ignore
 this.pusher.getEngageMdData().take(1).timeout(60 * 1000).subscribe(
   data => {
     this.canShowLoader = false;
     this.urlToOpen =  this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
  },
    (error) => {
      // console.log('error occurred', error);
      this.canShowLoader = false;
    },
   () => {
     // console.log('done');
     this.canShowLoader = false;
   }
 );
}


<iframe *ngIf="canShowLoader === false" [src]="urlToOpen" data-tap-disabled="true"></iframe>

<div class="loadingDiv" *ngIf="canShowLoader === true">
 <div class="loading_bg d-flex h-100">
   <div style="width: 70rem !important;" class="loader justify-content-center align-self-center"><div>
      <span style="color: white; font-size: 1.9rem">{{loadingMsg}}</span>
      <ion-spinner color="white"></ion-spinner>
    </div>
  </div>
</div>

I am getting iframe URL from api and I need to load the iframe URL from api in my HTML in the angular 7 app. Until I get the url I show a loader to users. which is working all great until now. But after that when the iframe content loads into dom it takes a few seconds. At that moment my page is blank. I want to show a loader in this gap as well.

How to achieve it?

urlToOpen: any;

ionViewDidLoad() {
   this.dataProcess();
}

dataProcess() {
  this.canShowLoader = true;
 // @ts-ignore
 this.pusher.getEngageMdData().take(1).timeout(60 * 1000).subscribe(
   data => {
     this.canShowLoader = false;
     this.urlToOpen =  this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
  },
    (error) => {
      // console.log('error occurred', error);
      this.canShowLoader = false;
    },
   () => {
     // console.log('done');
     this.canShowLoader = false;
   }
 );
}


<iframe *ngIf="canShowLoader === false" [src]="urlToOpen" data-tap-disabled="true"></iframe>

<div class="loadingDiv" *ngIf="canShowLoader === true">
 <div class="loading_bg d-flex h-100">
   <div style="width: 70rem !important;" class="loader justify-content-center align-self-center"><div>
      <span style="color: white; font-size: 1.9rem">{{loadingMsg}}</span>
      <ion-spinner color="white"></ion-spinner>
    </div>
  </div>
</div>

• javascript
• angular
• iframe

• stackoverflow./a/16485533/13596406 this worked for me – Pallavi Commented Aug 18, 2020 at 10:33

1 Answer 1

You should use a load event. It will emit once iframe is loaded. So you should display spinner until it will be emitted. It'd look something like it. d-none is class that sets display:none

<app-spinner *ngIf="isLoading"></app-spinner>
<iframe (load)="isLoading=false" [class.d-none]="isLoading"></iframe>