Revision history [back]

One way to prevent Angular from reloading iframes while switching between components is to use the ngIf directive to conditionally add or remove the iframe from the DOM when the component is switched.

For example, in the HTML template of the component that contains the iframe:

<div *ngIf="showIframe">
  <iframe src="https://example.com"></iframe>
</div>

Then, in the component's TypeScript file, set the showIframe boolean to true when the component is first loaded, and set it to false when the component is destroyed:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngIf="showIframe">
      <iframe src="https://example.com"></iframe>
    </div>
  `
})
export class MyComponent implements OnInit, OnDestroy {
  showIframe = true;

  ngOnInit() {
    // component initialization logic
  }

  ngOnDestroy() {
    this.showIframe = false;
  }
}

This way, the iframe will only be loaded once and will remain in the DOM but hidden when the component is switched, preventing it from reloading.