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.
Asked: 2022-01-05 11:00:00 +0000
Seen: 10 times
Last updated: Apr 09 '23