title: How to show loader until the iframe content fully get loaded in angular 7
body: <p>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.</p>
  
  <p>How to achieve it?</p>
  
  <pre><code>urlToOpen: any;
  
  ionViewDidLoad() {
     this.dataProcess();
  }
  
  dataProcess() {
    this.canShowLoader = true;
   // @ts-ignore
   this.pusher.getEngageMdData().take(1).timeout(60 * 1000).subscribe(
     data =&gt; {
       this.canShowLoader = false;
       this.urlToOpen =  this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
    },
      (error) =&gt; {
        // console.log('error occurred', error);
        this.canShowLoader = false;
      },
     () =&gt; {
       // console.log('done');
       this.canShowLoader = false;
     }
   );
  }
  
  
  &lt;iframe *ngIf="canShowLoader === false" [src]="urlToOpen" data-tap-disabled="true"&gt;&lt;/iframe&gt;
  
  &lt;div class="loadingDiv" *ngIf="canShowLoader === true"&gt;
   &lt;div class="loading_bg d-flex h-100"&gt;
     &lt;div style="width: 70rem !important;" class="loader justify-content-center align-self-center"&gt;&lt;div&gt;
        &lt;span style="color: white; font-size: 1.9rem"&gt;{{loadingMsg}}&lt;/span&gt;
        &lt;ion-spinner color="white"&gt;&lt;/ion-spinner&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>