Initially, when an iframe is loaded in Angular 10, it may display a 404 error page

Hey there! I'm currently using the HTML code below to incorporate an iframe and display an external page hosted on the same domain so no need to worry about cross domain issues:

<iframe frameborder="0" [src]="url"></iframe>

Additionally, I have implemented the following TypeScript code to sanitize and load the content:

this.url = this.sanitizer.bypassSecurityTrustResourceUrl("/assets/static/page.html");

The issue I am facing is quite strange - after the page loads, the iframe initially shows a 404 error for a brief moment in localhost and for 2 to 3 seconds in production. It then proceeds to display the actual page content. This can be quite frustrating since Angular lacks proper support for iframe events such as page load or failure.

angulartypescriptiframeangular10

Answer №1

It seems like the issue may be that you are setting the URL after the iframe has already been rendered. One possible solution is to add an *ngIf="url" directive to the iframe in order to delay its rendering until the URL has been properly set. Another option would be to ensure that the URL is set before the iframe is actually rendered. If these suggestions do not resolve the problem, could you kindly share the code of your component for further assistance?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to permit multiple instances of a component in separate tabs without losing their individual states?

My application is equipped with a lazy loading tab system that is controlled by a service. When a user chooses an option from the navigation menu, two key actions take place : An entry is appended to the tabs array within the tab service. A new route is t ...

angulartabslazy-loadingangular-routing

What is the best way to access nativeElements during the ngOnInit lifecycle hook?

Assume in my angular script I have the ability to access an HTML element with viewChild('someDiv') or constructor(private elem: ElementRef){}. When my angular component loads, I want to immediately retrieve a property of that element and store it ...

javascriptangular

The HTTP post method is not consistently triggering

Currently, I am in the process of developing a logout feature for angular (with a spring backend). The logout action is triggered by sending an HTTP post request to /auth/logout, where the endpoint invalidates the auth-token and refresh-token HTTP-only coo ...

angularspring

Obtaining a Child Component Reference in Angular 5 Testing

I am exploring the interaction dynamics between a host component and a child component within an Angular application. One challenge I'm facing is obtaining a reference to the child component that is created when the parent component is initialized. Th ...

angularunit-testing

SolidJS does not support reactivity for arrays of objects

I've been scratching my head trying to figure out why this code isn't working as expected. I'm simply updating an object and expecting it to be refreshed in the DOM, but for some reason, that's not happening. The console log confirms th ...

typescriptsolid-js

What is the best way to determine if a local storage key is not present?

By applying the if condition below, I can determine whether or not the local storage key exists: this.data = localStorage.getItem('education'); if(this.data) { console.log("Exists"); } To check for its non-existence using an if conditi ...

angulartypescript

What happens when Angular elements don't have an injector?

Exploring Angular's custom elements while steering clear of dependency injection is my current experiment. const MyElementElement = createCustomElement(MyElementComponent, { injector }); customElements.define('my-element', MyElementElement) ...

angulartypescript

Retrieving an array of objects through an Angular service

I'm fairly new to Angular and Javascript. Recently, I created an Angular service that fetches an array of users from an HTTP call returning JSON data. While the HTTP call is successful and returns the correct data, I'm having trouble passing this ...

arraysjsonangularrxjsangular2-http

The scrolling on the image listing webpage is not as fluid as desired

I'm currently working on building a website for displaying images in Angular, similar to Google Photos. The site includes a custom scrollbar that displays the month and year. I want the image list to scroll when the user moves the scrollbar thumb. Her ...

javascriptangularimage

What is the best way to find the common keys among elements in a tuple type?

type Tuple=[{a:string,x:string,z:string},{b:string,x:string,z:string}] type IntersectionOfTupleElementKeys<T>=... type MyType = IntersectionOfTupleElementKeys<Tuple> // = ('a'|'x'|'z')&('b'|'x&ap ...

typescript

Attempting to limit the user's input to only the beginning of the string

To prevent unexpected data from affecting the database and front end display, I am looking to limit users from inputting a negative sign at the beginning of their number only. My attempted solution so far: if(e .key Code == 109) { return ; } ...

angular

Locating the CSS selector for Material-UI combobox options in Playwright

Currently, I am struggling to identify the CSS selector for the items listed under a mui Combobox. The main issue is that each item is dynamically identified by the 'aria-activedescendant' attribute, which takes on values like id-option-0, id-opt ...

typescriptplaywright

"Setting Up a Service in Angular: A Step-by-Step Guide

I am facing an issue with a root service that contains composition within it, as shown below: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MapService { private rmap: RMap; ini ...

angulartypescript

A guide on assigning a value to a form in Angular using FormControl

<div class="form-group" [formGroup]="gGroup"> <label for="grouplabel">Group</label> <select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control"> & ...

angularangular-forms

What is the best way to trigger click events within a select dropdown using Angular?

I have implemented two buttons (month, year) that trigger different events. Now, I want to replace these buttons with a select element. Can you guide me on how to achieve this? Here is my current code: // Button implementation <button class="menu-butt ...

htmlangulardom-eventseventemitter

Unable to start an expo project in bare workflow using TypeScript

Can someone help me with setting up an expo bare workflow using TypeScript? I ran the command "expo init [project name]" in my terminal, but I can't seem to find the minimal (TypeScript) option. ? Choose a template: » - Use arrow-keys. Return to sub ...

typescriptreact-nativeexpo

Ways to implement JavaScript code in Angular 7 application

I am attempting to create a collapsible navigation bar using MaterializeCSS for mobile screens and I plan to incorporate JavaScript code into it. Can you advise where I should place this JavaScript code? Below is the snippet of code that I intend to inclu ...

javascriptjqueryangularmaterializeangular7

Tips for saving metadata about properties within a class

I am looking to add metadata to properties within classes, specifically using abbreviations for property names. By using annotations like @shortName(abbreviated), you can label each property as follows: function shortName(shortName: string){ return fu ...

typescriptpropertiesmetadata

Promise<IDropdownOption[]> converted to <IDropdownOption[]>

I wrote a function to retrieve field values from my SPFx list: async getFieldOptions(){ const optionDrop: IDropdownOption[]= []; const variable: IEleccion = await sp.web.lists.getByTitle("Groups").fields.getByTitle("Sector").get ...

javascriptreactjstypescriptpromisespfx

RXJS - Leveraging BehaviorSubject's value property for optimal usage

I'm curious about the proper use of behaviorSubject.value. In a discussion on Stack Overflow, it was mentioned that values should ONLY be obtained through subscription. One scenario where it makes sense to me is when I need to determine the next valu ...

angularrxjs