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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-01-05 11:00:00 +0000
Seen: 9 times
Last updated: Apr 09 '23
How can one ensure that sub-classes have uniform method parameters in TypeScript?
Can a TypeScript definition for icon names be provided in MaterialCommunityIcons for React Native?
How can TypeScript be used to save a file in an Excel add-in?
What is the Angular Type script NG Zorro event for radio buttons?
What is the process for implementing a Many to Many relationship using NestJs Sequlize and Mysql2?
What is the method for defining a Fixed length Array in TypeScript?
What difficulties are encountered in the installation of react-router-dom using typescript?